如何为文本框添加内边距而不增加宽度？

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

然而，填充值似乎没有按照预期的方式起作用。文本区域的宽度在两个方向上都增加了350像素，而不是在元素边框和内容之间定义空间。

我考虑过通过将边距设置为"0像素auto"来居中文本区域，但我希望用户仍然能够在鼠标悬停在空白边缘之一时滚动文本区域。出于同样的原因，我不能添加另一个div作为包装器，因为用户只能沿着没有边距的文本区域滚动，而不能沿着空白区域滚动。

有人能帮忙吗？

- 木川 炎星

Answer 1

CSS盒模型将“宽度”定义为内容的宽度，不包括边框、内边距和外边距。

幸运的是，CSS3引入了一个新的“box-sizing”属性，可以修改这种行为，使得指定的宽度包括内边距等内容。使用方法如下：

box-sizing: border-box;

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

- casablanca

---

有趣。很难相信这只是在CSS3中才成为可能的。不管怎样，它有效了。谢谢！ - 木川 炎星

不错。这是适用于FF/Safari的代码： -moz-box-sizing:border-box; /* Firefox / -webkit-box-sizing:border-box; / Safari */ - Nir O.

注意：box-sizing应该在父元素上指定，而不是在文本区域上。 - mikeborgh

不错...输入有问题，只有选择不起作用...没关系...谢谢！ - KingRider

适用于div和大多数其他元素。不适用于文本区域（textarea）。 - Sod Almighty

终于知道这个是干什么的了。 - cpcdev

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

- Ninad

---

在文本框内进行填充时，它并没有帮助。 - Leo

Answer 3

一些浏览器允许您针对占位符进行颜色等更改，因此您也可以添加填充：

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

- iceT

Answer 4

CSS指定的宽度不包括填充或边框（根据W3C规范）。我猜可能需要使用JavaScript来设置#editor的宽度为#body减去700像素的宽度，但这有点麻烦...不确定是否有CSS方法可以实现你想要的效果。当然，你也可以使用margin，然后在#body上注册onMouseWheel事件来处理...

- Niet the Dark Absol

Answer 5

只需添加一个简单的边框：

border-bottom: 1em solid white;

随意使用所需的颜色和大小。您还可以使用border-top，border-left，border-right或只使用border。要使其像填充一样运行，请确保添加与background-color相同的颜色

.parent, textarea{
  width:100%;
}

.parent{
  display:flex;
}

textarea{
  border:1em solid black;
}

<div class='parent'>
  <textarea rows="5"></textarea>
</div>

- Iglesias Leonardo