Question

我正在尝试构建一个工具栏，其中包含一个像这样的复选框。

<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/中看到它的结果在工具栏的顶部和每个按钮的边框顶部之间有一个像素空间。现在，如果你从ul中删除复选框，那么像素线就会消失，一切都很好。任何人都可以告诉我，为什么复选框消耗比其余像素多一个像素？

提前致谢克里斯

Answer 1

如果使用开发人员工具检查单选按钮，则会发现输入[type = radio“]具有默认边距。此边距是额外像素的来源。

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

解决方案：

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

Answer 2

将vertical-align:top添加到复选框

input{
    vertical-align:top
}

<强> DEMO

如需解释，请查看 similar answer

Answer 3

我不会说这是所有浏览器的情况，但绝大多数。当涉及到收音机和复选框输入时，它们通常会有默认的页边距预设。

对于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;

据说我已经回顾了你的代码并注意到css故障设置在12px的放置文本中，带有填充顶部和放大器。底部2px每个等于16px的总数，而一个取决于浏览器的复选框设置约5px左右1px边框，更不用说3px顶部和底部的边距为18px。为了补偿，请使用以下内容修改预设。

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

为什么HTML复选框比其他复选框消耗多一个像素？

3 个答案: