为什么有时填充高度？

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，如果它覆盖它但我没有找到。我比较了两种情况下的结果。左边是减小的高度，右边是预期的高度。

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

Answer 1

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

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

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

Answer 2

如果对某人有用，jQuery似乎对此很可靠：

• .height()不包括填充（即使在框大小的情况下也是如此：border-box）
• .outerHeight()包括填充和边框
• .outerHeight(true)包括填充和边框以及边距

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

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像素将包括 边框或填充，内容框将缩小以吸收 那多余的宽度。这通常使尺寸更容易 元素。