如何在不增加宽度的情况下向textarea添加填充？

Question

我一直无法设置textarea元素的宽度并通过CSS使用填充.填充值似乎改变了textarea的宽度,我宁愿不这样做.

这是我的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"来对textarea进行居中,但是如果鼠标悬停在其中一个空边距上,我希望用户仍能够滚动文本区域.出于同样的原因,我无法添加另一个div来充当包装器,因为用户无法沿着空白区域滚动,而只能沿着无边距的textarea滚动.

有人可以帮忙吗？

Answer 1

的CSS盒模型的"宽度"定义为内容的宽度,但不包括边界,空白和边距.

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

box-sizing: border-box;

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