Margin CSS not taking affect to checkbox element

Question

Hey guys I'm a little confused to why the margin CSS I am applying to my checkbox element isn't working. Here is an example of my code:

HTML:

<div class="panel">
         <input id="bodytype-checkbox" class="float-checkbox" type="checkbox"/>
         <label for="bodytype-checkbox" class="label-checkbox">Bodytype</label>
</div>

CSS:

.float-checkbox{
    float:left;
    margin: 10px 10px 0 0;
    cursor: pointer;
}

Any idea what I'm doing wrong? Here is the fiddle: http://jsfiddle.net/LvhCh/38/

Answer 1

It looks like bootstrap.css is a little more specific when styling checkboxes.

input[type=radio], input[type=checkbox] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}

and it's overriding yours.

Answer 2

By default the checkbox is using bootstraps.css margin. To override this use a more specific css selector. Use the below css

input[type=checkbox].float-checkbox{
  float:left;
  margin: 10px 10px 0 0;
 cursor: pointer;
}