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

概述我一直在设置textarea元素的宽度和使用填充通过CSS麻烦.填充值似乎改变了textarea的宽度,我宁愿不做. 这是我的HTML代码： <div id="body"> <textarea id="editor"></textarea></div> 和我的CSS代码： #body { height:100%; width:100%; display:block 我一直在设置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)支持此属性,但在每个浏览器中都有不同的名称.

总结

以上是内存溢出为你收集整理的html – 如何添加填充到textarea而不会导致宽度增加？全部内容，希望文章能够帮你解决html – 如何添加填充到textarea而不会导致宽度增加？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。