html - 这些鬼像素是从哪里拍摄的？

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 像素；边框和内边距将被插入固定宽度内部，并将占用框内的空间，而不是增加框外元素的大小。

希望对您有所帮助。