Why is a HTML checkbox consuming one pixel more than the rest?

Question

I am trying to build a toolbar, containing a checkbox like this.

<div class="toolbar"><div class="widget-toolbar">
        <ul class="items">

        <li class="toolbar-button item">
        Record
    </li><li class="toolbar-button item">
        Load
    </li><li class="toolbar-button item">
        Save
    </li><li class="toolbar-button item">
        Clear
    </li><li class="toolbar-checkbox item">
        <input type="checkbox" id="1369637447465" value="true">
        <label for="1369637447465" style="-webkit-user-select: none;">Continuous check</label>
    </li></ul>
    </div></div>

But as you can see in this fiddle http://jsfiddle.net/9WSpa/ its Result has one pixel space between the botder-top of the toolbar and the border top of each button. Now if you remove the checkbox from the ul, then the pixel line vanishes and everything is fine. Can anyone tell me, why the checkbox consumes one pixel more than the rest?

Thanks in advance Chris

score 1 · Answer 1 · answered May 27 '13 at 07:25

1

If you inspect the radio button with your developer tool, then you'll discover that the input[type=radio"] has a default margin. This margin is the source of the extra pixels.

user agent stylesheet input[type="checkbox"] {
margin: 3px 3px 3px 4px;
}

Solution:

input[type="checkbox"] {
 margin: 0;
}

answered May 27 '13 at 07:25

brutusmaximus86

264
2
7

Can you tell me, how to center it vertically? Manually positioning it with margin/padding seems not to work out. – Coxer May 27 '13 at 07:32
give the input[type=radio] vertical-align: text-bottom, and/or give .widget-toolbar .items .toolbar-checkbox { padding-top: 5px; } – brutusmaximus86 May 27 '13 at 08:34

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

Add vertical-align:top to checkbox

input{
    vertical-align:top
}

DEMO

And for explanation check this similar answer

edited May 23 '17 at 10:25

Community

1
1

answered May 27 '13 at 07:13

Sowmya

26,684
21
96
136

score 0 · Answer 3 · answered May 27 '13 at 07:56

Im not going to say that this is the case for all browsers but a fair majority. when it comes to radio and checkbox inputs they usual have a default margin preset.

For Chrome :

margin-top: 3px;
margin-right: 0.5ex;
margin-bottom: 3px;
margin-left: 0.5ex;

For FireFox :

margin-top: 3px;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 4px;

with that being said I've reviewed your code and noticed by css faults set in placed text at 12px with a padding-top & bottom 2px each equaling 16px's total while a checkbox depending on the browser is set about 5px around with 1px border not to mention the margin of 3px top and bottom making 18px. In order to compensate, modify the presets with the following.

.widget-toolbar .items input[type="checkbox"]{
    margin: 2px 0.5ex;
}

Why is a HTML checkbox consuming one pixel more than the rest?

3 Answers3