Remove the space between the checkboxes

Question

I have a form that contains several checkboxes located vertically in a div. I want to remove the space between each checkbox. But I can not 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 a solution to this problem?

Answer 1

I found a solution:

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

For IE, you need to set the height to remove the space between the 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 uses doctype HTML 4.01 strict. if you want side by side for flags, use a height of 13 pixels.

The attribute selector will not work on IE 6, so it will be downloaded here. If you need to add another input element that is not a check box, use a class instead.

Answer 3

The newlines between the <input> tags are probably interpreted as any other spaces, so you see spaces between them. I think the CSS rules have nothing to do with this.

---

Edit: Further research leads me to conclude that spaces will only affect horizontal gaps. Regarding the vertical space, I believe that it is impossible to guarantee that the flags will stick together without using custom graphics - web browsers are not required to make them perfectly square by standards, so even if you find a way to make their bounding boxes touch each other, the effect may be unsatisfactory.

To make your bounding rectangles as close as possible, set the line-height attribute on the div element. With the original sprites, it doesn't look the way you wanted it in any browser that I tested.

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

---

Other editing: Some people suggested using a fixed input element height of 13px . Remember! This is not true . You cannot rely on the fact that some browsers have a built-in help flag of this height.

Answer 4

There is a space between each flag. 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

Just install:

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

But it will not work in IE.

I think different browsers render html elements differently. Thus, it becomes difficult to fully grasp the situation.

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

CSS will look like this:

 <style type="text/css"> input.mycheckbox { height: 13px; width: 13px } body { font-size: 40%; } </style> 

And the contents of the body tag:

Hope this helps.

Answer 6

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 now acts css :)