html – 如何添加填充到textarea而不会导致宽度增加？

我一直在设置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;
}

然而,填充值似乎没有像预期的那样工作.文本区域的宽度在两个方向上增加了350像素,而不是定义元素的边框与其内容之间的空间.

我已经考虑通过将边距设置为“0px auto”来定位文本区域,但是如果鼠标悬停在空白边距之间,我希望用户仍然能够滚动文本区域.由于同样的原因,我无法添加另一个div作为包装器,因为用户将无法沿着空白区域滚动,而只能沿着无边距文本区域滚动.

有人可以帮忙吗？

解决方法

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

幸运的是,CSS3有一个新的box-sizing属性,可以使用以下方式修改此行为,而不是包含指定宽度的填充等：

Box-sizing: border-Box;

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