css - 为什么填充有时包含在高度中？

Question

我有一个文本区域，我向其中添加了一些 CSS

<textarea watermark="Have a question? ..." class="test-input" rows="4" cols="15" name="">Have a question? ...</textarea>

并对其应用 CSS -

.test-input {
    border: 1px solid #D0D0D0;
    border-radius: 3px 3px 3px 3px;
    color: #646464;
    float: left;
    font-family: Arial;
    font-size: 12px;
    height: 20px;
    margin: 0 0 0 15px;
    padding: 5px;
    resize: none;
    width: 264px;
}

然后我得到了带有一些内边距的文本区域。在它工作绝对正常的情况下，文本区域高度变为 20px，5px 填充不包括在高度中。但是，在少数情况下，文本区域的高度包括填充，并且高度会降低到 8px。如果它覆盖了它，我已经寻找过任何 css，但我没有找到。我比较了两种情况下的结果。左边是降低后的高度，右边是期望的高度。

我可以解决这个问题，在其他情况下专门管理高度，添加 !important 或在一些 JavaScript 的帮助下。但是，我想知道造成这种影响的原因是什么。为什么以及在什么情况下填充会包含在高度或宽度中？

Answer 1

这取决于您使用的 box-sizing 属性:

• border-box 表示在 CSS 中定义/计算的框的高度和宽度也将包括应用于它的填充和边框宽度
• content-box 是默认行为，其中填充和边框宽度被添加到框的定义/计算的高度和宽度上。

如左侧示例所示，通过设置 box-sizing: border-box，您已将元素的高度定义为 20px。这意味着实际的内容框将只有 8px 高，因为浏览器会从定义的高度中减去 border(1px top，1px bottom)和 padding(5px top，5px bottom)，只剩下 8px，这有点有点太短，无法包含整行的高度(因此该词似乎被截断了)。