为什么有时填充高度？

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 是默认行为,其中填充和边框宽度添加到框的定义/计算的高度和宽度上.

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