Remove the space between checkboxes - html

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

I found the solution:
<input type="checkbox" style="margin: 0; padding 0; height:13px"/>
For IE, you need to set the height to remove the space between checkboxes.

Answer 2

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 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

There is white-space between each checkbox. The only way to remove it is to float them:
<style type="text/css">
.myCheckBoxDiv > input[type="checkbox"]
{
float: left;
}
.myCheckBoxDiv:after
{
clear: both;
content: "";
display: block;
}
</style>
<div class="myCheckBoxDiv">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>

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 :)

Answer 6

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.