如何在不增加宽度的情况下向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 box model将“width”定义为内容的宽度，不包括边框，填充和边距。

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

box-sizing: border-box;

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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