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;
}

我得到了里面有一些填充的文本区域。在它工作得很好的情况下，文本区域高度为 20 像素，高度中不包含 5 像素的填充。但是，在少数情况下，文本区域的高度包括内边距，高度会降低到 8px。如果它覆盖它，我已经寻找任何 css，但我没有找到。我比较了两种情况的结果。左边是减少的高度，右边是预期的高度。

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

score 47 · Accepted Answer

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

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

通过box-sizing: border-box在左侧示例中看到的设置，您已将元素的高度定义为 20 像素。这意味着实际的内容框将只有 8px 高，因为浏览器将从定义的高度减去边框（1px 顶部，1px 底部）和填充（5px 顶部，5px 底部），只剩下 8px，这是一点点位太短而无法包含整行的高度（因此该单词似乎被截断）。

score 2 · Accepted Answer

jQuery 似乎与这些定义一致：

.height()不包括填充（即使在 box-sizing:border-box 的情况下）
.innerHeight()包括填充但不包括边框
.outerHeight()包括填充和边框
.outerHeight(true)包括填充和边框和边距

每个都可以设置或获取，例如$element.outerHeight(desired_height_including_margins, true);

（图片摘自链接页面。）

score 0 · Accepted Answer

参考https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing，

该box-sizing属性可用于调整此行为：

content-box为您提供默认的CSS box-sizing 行为。如果将元素的宽度设置为 100 像素，则元素的内容框将是 100 像素宽，并且任何边框或填充的宽度都将添加到最终渲染的宽度中，使元素宽于 100 像素。

border-box告诉浏览器在您为元素的宽度和高度指定的值中考虑任何边框和填充。如果您将元素的宽度设置为 100 像素，那么 100 像素将包括您添加的任何边框或填充，并且内容框将缩小以吸收额外的宽度。这通常会使调整元素大小变得容易得多。

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

3 回答 3

Related

Reference