爲什麼HTML複選框比其餘的消耗更多的像素？

我正在嘗試構建一個工具欄，其中包含一個像這樣的複選框。爲什麼HTML複選框比其餘的消耗更多的像素？

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

但你可以在此看到小提琴其http://jsfiddle.net/9WSpa/結果是工具欄的botder-top和每個按鈕的上邊框之間的一個像素的空間。現在，如果您從ul中刪除複選框，那麼像素線會消失，並且一切正常。任何人都可以告訴我，爲什麼複選框消耗比其他更多的像素？

在此先感謝克里斯

來源

2013-05-27 Coxer

添加vertical-align:top到複選框

input{ 
    vertical-align:top 
}

DEMO

而對於解釋檢查這個similar answer

來源

2013-05-27 07:13:57 Sowmya

如果您使用開發人員工具檢查單選按鈕，則會發現輸入[type = radio「]具有默認邊距。這個餘量是額外像素的來源。

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

解決方案：

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

來源

2013-05-27 07:25:08 brutusmaximus86

你能告訴我，如何垂直居中？用margin/padding手動定位它似乎不成功。 – Coxer

給出輸入[type = radio] vertical-align：text-bottom，和/或給出.widget-toolbar .items .toolbar-checkbox {padding-top：5px; } – brutusmaximus86

Im不去說，這是所有瀏覽器，但一個公平的大多數的情況下。當談到收音機和複選框輸入時，他們通常會有一個默認的邊距預設。

使用Chrome：

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

對於Firefox：

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

他這樣說我查看了您的代碼，並在放置的文本在12px的用填充機頂設置CSS發現故障&底部2px每個等於16px的總數，而取決於瀏覽器的複選框被設置爲大約5px圍繞1px邊界，更不用說3px的邊界和底部使得18px。爲了補償，請用以下方法修改預設。

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

來源

2013-05-27 07:56:50

爲什麼HTML複選框比其餘的消耗更多的像素？

回答

相關問題