0

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

    #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 个额外的像素？）。

4

3 回答 3

2

额外的两个像素是边框。

这对于计算元素的宽度和剩余空间等可能是一个问题。

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

如果您box-sizing:border-box;在 CSS 中为元素指定，那么元素的总宽度将正好是 100 像素；边框和内边距将被推到固定宽度内，并将占用盒子内的空间，而不是给盒子外面的元素增加尺寸。

希望有帮助。

于 2013-06-15T10:21:57.953 回答
1

使用box-sizing财产。

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

box -sizing的默认值为content-box。在 的情况下，你给元素的content-box任何一个都会增加它的宽度。所以paddingborder

100px + 5px + 5px + 1px + 1px
-----   ---------   ---------     gives 112px
width    padding      border
于 2013-06-15T10:20:33.423 回答
0

很可能是由于border. 如果不发布更多代码，就很难弄清楚。

就像 Vucko 建议的那样，您应该考虑使用CSS 重置文件。

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

于 2013-06-15T10:12:01.583 回答