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

I've been having trouble setting a textarea element's width and using padding via CSS. The padding value seems to change the width of the textarea, which I'd rather it not do.

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

This is my HTML code:

这是我的HTML代码：

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

And my CSS code:

我的CSS代码：

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

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

However, the padding values do not appear to work as one would expect. The width of the textarea is increased by 350px in both directions, rather than defining space between the borders of the element and its content.

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

I've considered just centering the textarea by setting the margins at "0px auto", but I would like the user to still be able to scroll through the textarea if the mouse is hovering over one of the empty margins. For the same reason I can't add another div to act as a wrapper, as the user wouldn't be able to scroll along the empty areas but only along the margin-less textarea.

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

Can anybody help?

有人可以帮忙吗？

4 个解决方案

#1

The CSS box model defines "width" as the width of the content, excluding border, padding and margin.

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

Fortunately, CSS3 has a new box-sizing property that lets you modify this behaviour to instead include padding etc. in the specified width using:

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

box-sizing: border-box;

According to the link above, most modern browsers (including IE >= 8) support this property, but they have different names in each browser.

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

#2

Specifying widths and margins/padding in '%' helps. Here is one example -

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

Live @ http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

直播@ 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%;
}

#3

The width specified by CSS does not include padding or border (in accordance with W3C specifications). I guess one way of doing it is with some JavaScript that sets the width of #editor to the width of #body minus 700px, but that's a bit messy... Not sure if there's a CSS way of doing what you want here. Of course, you could use margin then register the onMouseWheel event to the #body and work with that...

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

#4

Some browsers allow you to target the placeholder for changing the color etc., so you can add padding as well:

有些浏览器允许您定位占位符以更改颜色等，因此您也可以添加填充：

::-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;
}

#1