CODEWITHSUNDEEP
htmlcss
Billy
Billy

Reputation: 15706

Remove the space between checkboxes

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?

Upvotes: 4

Views: 23303

Answers (6)

Billy
Billy

Reputation: 15706

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.

Upvotes: 9

Oundless
Oundless

Reputation: 5515

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>

Upvotes: 1

samuil
samuil

Reputation: 5081

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.

Upvotes: 2

nonopolarity
nonopolarity

Reputation: 151264

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.

Upvotes: 5

priyanka.sarkar
priyanka.sarkar

Reputation: 26538

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.

Upvotes: 0

Samuel Parkinson
Samuel Parkinson

Reputation: 3100

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

Upvotes: 0

Related Questions