为什么有时候高度包含填充(padding)？

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像素，不包括在高度内。但在少数情况下，文本区域的高度包含了内边距，高度减小到8像素。我查找任何可能覆盖它的CSS，但没有发现。我比较了两种情况的结果。左侧是减小的高度，右侧是期望的高度。

我可以解决这个问题，在另一种情况下特别地管理高度，添加!important或借助JavaScript。但是，我想知道是什么原因导致出现这样的效果。为什么在哪些情况下内边距会包含在高度或宽度内？

- Ashmah

---

尽量不要给输入字段和文本区域添加高度，而是尝试使用填充、文本大小和行高来控制高度。如果最终用户为了辅助功能而增加字体大小，则这些字段很可能无法使用。 - James King

Answer 1

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

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

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

- Terry

---

是的，Terry，我同意你的观点。:) 但通常情况下，我们不会专门设置box-sizing属性，默认行为是'content-box'。即使如此，有时候也会出现这种情况，这就是让我思考的原因。你可以在那个textarea的样式中看到。或者可能是我在这里漏掉了什么。 - Ashmah

@Ashmah 我通常在输入字段中使用 box-sizing: border-box，因为几乎不可能让所有浏览器完全相同地呈现输入元素（精确到像素）。使用 border-box 约束强制浏览器呈现输入，无论内部框的高度如何，都要呈现为指定的高度。这在你遵循严格的网格设计时特别有用，因为像素精度非常重要 :) - Terry

谢谢Terry！感谢你详细的解释。我相信在以后处理这类事情时，这些内容会一直留在我的脑海中... :) - Ashmah

晚了点，但还是要感谢你！我花了一些时间才明白为什么<button>的行为与<div>不同（它会将填充添加到CSS高度中）...http://jsfiddle.net/1hms7x4k/1/ - BurninLeo

Answer 2

jQuery似乎与这些定义一致：

• .height() 不包括padding（即使box-sizing: border-box）
• .innerHeight() 包括padding但不包括border
• .outerHeight() 包括padding和border
• .outerHeight(true) 包括padding、border和margin

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

（图片摘自链接页面。）

- Bob Stein

Answer 3

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

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

• content-box提供了默认的CSS盒模型行为。如果你将一个元素的宽度设置为100像素，那么该元素的内容框将是100像素宽的，任何边框或填充的宽度都将添加到最终呈现宽度中，使元素比100px更宽。
• border-box告诉浏览器在指定元素的宽度和高度的值时考虑任何边框和填充。 如果你将一个元素的宽度设置为100像素，那么这100像素将包括你添加的任何边框或填充，并且内容框会缩小以吸收那额外的宽度。 这通常使调整元素大小变得更加容易。

- Mohsenasm