Remove the space between checkboxes

Question

I have a form which contains several checkboxes align vertically in a div. I want to remove the space between each checkbox. But I can't find any solutions.

<div style="height:100px;width:25px;float:left;">
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
</div>

Does anyone have any solution to this problem?

Answer 1

After talking to Paul O'B, a CSS guru, this is a good solution that works in IE 6, 7, 8, FF 3, and Chrome:

<style type="text/css">     
    #aDiv input {
     margin: 0;
     padding: 0;
     display:block;
     height:12px;
     overflow:hidden
    }
</style>

<div id="aDiv" style="width:25px">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>

This is using a doctype of HTML 4.01 strict. if you want side-by-side borders for the checkboxes, use a height of 13px.

The attribute selector won't work on IE 6 so it is taken out here. If you need to add other input element that is not a checkbox, use class instead.

Answer 2

I find the solution:

  <input type="checkbox" style="margin: 0; padding 0;  height:13"/>

For IE, we need to set the height to remove the space between checkboxes.

Answer 3

Probably newlines between <input> tags are interpreted as any other whitespaces, that's why you see spaces between them. I think CSS rules has nothing to do with it.

---

Edit: Further investigation leads me to conclusion that whitespaces would only affect horizontal gaps. As of vertical space I believe it is impossible to assure that checkboxes will stick together without using custom graphics — web browsers are not obligated to make them perfectly square by standards, so even if you will find a way to make their bounding boxes touch each other, effect might not be satisfactory.

To make their bounding boxes as close as possible set line-height attribute for div element. With original sprites it doesn't look like you wanted it to in any browser I have tested.

Using custom graphic of some height, and identical line-height should do the trick.

---

Another edit: Some people here proposed using fixed height of input element of 13px. Remember! It is wrong. You can't rely on a fact, that some browsers have built-in checkbox sprite of that height.

Answer 4

Just set:

<input type="checkbox" style="margin: 0">

But it will not work in IE.

I think different browsers renders the html elements differently. So, it becomes difficult to get a complete hold on the situation.

However, I found one solution but this time we need to apply some trick on the body element.

The CSS will be like this:

<style type="text/css">
    input.mycheckbox {
        height: 13px;
        width: 13px
    }

    body {
        font-size: 40%;
    }
</style>

And the contents within body tag is:

Hope this helps.

Answer 5

This worked for me:

<style type="text/css">
body,html,input {padding:0;margin:0;}
</style>
<div style="height:100px;width:25px;float:left;">
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
</div>

Edit: It's valid css now :)