html - 如何在不增加宽度的情况下向文本区域添加填充？

Question

我一直无法通过 CSS 设置文本区域元素的宽度和使用填充。填充值似乎会改变文本区域的宽度，我不希望它这样做。

这是我的 HTML 代码:

<div id="body">
    <textarea id="editor"></textarea>
</div>

还有我的 CSS 代码:

#body {
    height:100%;
    width:100%;
    display:block;
}

#editor {
    height:100%;
    width:100%;
    display:block;
    padding-left:350px;
    padding-right:350px;
}

但是，填充值似乎并没有像人们预期的那样工作。 textarea 的宽度在两个方向上增加了 350px，而不是在元素的边界和它的内容之间定义空间。

我已经考虑通过将边距设置为“0px auto”来使文本区域居中，但我希望如果鼠标悬停在其中一个空白边距上，用户仍然能够滚动文本区域。出于同样的原因，我无法添加另一个 div 来充当包装器，因为用户将无法沿着空白区域滚动，而只能沿着无边距的文本区域滚动。

有人可以帮忙吗？

Answer 1

CSS box model将“宽度”定义为内容的宽度，不包括边框、填充和边距。

幸运的是，CSS3 有一个新的 box-sizing允许您修改此行为以在指定宽度中包含填充等的属性，使用:

box-sizing: border-box;

根据上面的链接，大多数现代浏览器(包括 IE >= 8)都支持此属性，但它们在每个浏览器中的名称不同。