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

我一直有麻烦设置一个textarea元素的宽度和通过CSS使用填充。填充值似乎改变了textarea的宽度，我宁愿不这样做。如何添加填充到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来充当包装，因为用户不能沿着空白区域滚动，而只能沿着无边距文本区域滚动。

任何人都可以帮忙吗？

来源

2010-11-15 木川炎星

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

幸运的是，CSS3有一个新的box-sizing属性，可以让你修改这个行为，而不是用在包括指定宽度填充等：

box-sizing: border-box;

根据上面的链接，最现代的浏览器（包括IE> = 8）支持这个属性，但是它们在每个浏览器中都有不同的名字。

来源

2010-11-15 01:54:08 casablanca

有趣。很难相信这只有通过CSS3才能实现。无论如何，它的作品。谢谢！ – 2010-11-15 02:13:18

不错的一个。这里是FF/Safari的代码： -moz-box-sizing：border-box;/* Firefox */ -webkit-box-sizing：border-box;/* Safari */ – 2012-04-27 19:12:11

注意：应该在父级上指定箱子尺寸，而不是textarea。 – mikeborgh 2015-04-25 02:05:52

由CSS指定的宽度不包括填充或边框（符合W3C规范）。我猜这样做的一种方式是使用一些JavaScript将#editor的宽度设置为#body减去700px的宽度，但这有点麻烦......不确定是否有CSS的方式来做你想要的东西。当然，您可以使用margin，然后将onMouseWheel事件注册到#body并使用它...

来源

2010-11-15 01:49:31

在'％'中指定宽度和边距/填充有帮助。下面是一个例子 -

直播@http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

#body { 
    background-color:#ccc; 
    height:100%; 
    width:100%; 
    display:block; 
} 

textarea#editor { 
    border:none; 
    width:80%; 
    height:100%; 
    margin-left:10%; 
    margin-right:10%; 
}

来源

2012-02-24 07:10:32 Ninad

当您希望在textarea内进行PADDING时，它无济于事。 – Leo 2013-02-13 16:53:04

有些浏览器可让您指定占位符，用于改变颜色等，这样你就可以添加填充以及：

::-webkit-input-placeholder { /* WebKit browsers */ 
    padding: 5px 0 0 5px; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    padding: 5px 0 0 5px; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    padding: 5px 0 0 5px; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    padding: 5px 0 0 5px; 
}

来源

2017-12-16 19:43:42 iceT

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

回答

相关问题