为什么填充有时包含在高度中？答案

【问题标题】：Why padding is included in height sometimes?为什么填充有时包含在高度中？
【发布时间】：2013-02-26 11:19:50
【问题描述】：

我有一个文本区域，并在其中添加了一些 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。但是，我想知道造成这种影响的原因是什么。为什么以及在哪些情况下填充会包含在高度或宽度中？

【问题讨论】：

尽量不要为输入字段和文本区域添加高度，尝试使用填充、文本大小和行高来控制高度 - 如果最终用户出于可访问性原因增加了字体大小，那么字段很可能无法使用

标签： css padding

【解决方案1】：

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

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

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

【讨论】：

是的，特里，我同意你的看法。 :) 但通常情况下，我们不会专门设置 box-sizing，默认行为是 'content-box'。即使这样，有时也会发生这种情况，这就是让我思考的情况。您可能会在该文本区域的样式中看到那里。或者可能是我在这里遗漏了一些东西。
@Ashmah 我通常将box-sizing: border-box 用于输入字段，因为几乎不可能让所有浏览器都以相同的方式呈现输入元素（精确到像素）。使用border-box 约束会强制浏览器将输入渲染到指定高度，而不管内框高度如何。当您遵循强大的网格设计时，这尤其有用，其中像素精度意味着一切:)
谢谢特里！详细解释。我敢肯定，当我处理此类事情时，我会始终牢记这一点...... :)
迟到了，谢谢！我花了一段时间才明白为什么 <button> 的行为与 <div> 不同（将填充添加到 CSS 高度）...jsfiddle.net/1hms7x4k/1

【解决方案2】：

jQuery 似乎与这些定义一致：

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

每个都可以set或get，例如$element.outerHeight(desired_height_including_margins, true);

（图片摘自链接页面。）

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：