Question

我有输入，主要信息有这两个属性：

    #answer_user_answer{

    display: inline-block;
    text-align:center;
    font-size: 15px;
    margin-bottom: 0;
    border: solid 1px;
    outline: none;
    padding: 2px 5px 2px 5px;
    width: 100px;
}

但是，当我使用Chrome开发人员工具查看实际宽度时，它是112px。

100 + 5 + 5 = 110，两个额外像素是多少？

（我问，因为提交时这些表单应该用宽度完全相同的元素替换，不要导致其他元素移位，我不想为此编写特殊的JS函数。我怎么知道，其他浏览器不插入4,6个额外的像素？）。

Answer 1

额外的两个像素是边框。

这可能是一个问题，可以解决一个元素的宽度以及剩余多少空间等问题。

有一个选项可以切换盒子模型，使边框和填充包含在盒子里面，这可以帮助解决这个问题：

如果在CSS中为元素指定box-sizing:border-box;，则元素的总宽度将精确为100像素;边框和填充将在内部固定宽度，并占用框内的空间，而不是向其外部的元素添加大小。

希望有所帮助。

Answer 2

使用box-sizing属性。

#answer_user_answer {
    ...
    box-sizing: border-box;
    ...
}

box -sizing的默认值为content-box。如果是content-box，则您为元素添加的任何padding和border都会增加其宽度。所以

100px + 5px + 5px + 1px + 1px
-----   ---------   ---------     gives 112px
width    padding      border

Answer 3

很可能是因为border。没有发布任何代码，很难搞清楚。

像Vucko建议的那样，你应该考虑一个CSS reset文件。

如果您在应用重置CSS文件后使用Chrome或Firefox检查代码，则应注意一些差异。

从这些鬼像素拍摄的地方？

3 个答案: