如何在不增加宽度的情况下向文本区域添加填充？

Posted 2023-05-07

【中文标题】如何在不增加宽度的情况下向文本区域添加填充？

【英文标题】：How can I add padding to a textarea without causing the width to increase?

【发布时间】：2011-05-10 00:17:06

【问题描述】：

我在设置 textarea 元素的宽度和通过 CSS 使用填充时遇到了问题。 padding 值似乎改变了 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 的宽度在两个方向上都增加了 350 像素，而不是在元素的边框与其内容之间定义空间。

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

有人可以帮忙吗？

【参考方案1】：

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

幸运的是，CSS3 有一个新的box-sizing 属性，可让您修改此行为以在指定宽度中包含填充等：

box-sizing: border-box;

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

【讨论】：

有趣。很难相信这只有在 CSS3 中才有可能。无论如何，它有效。谢谢！

不错的一个。这是 FF/Safari 的代码：-moz-box-sizing:border-box; /* Firefox / -webkit-box-sizing:border-box; / 野生动物园 */

注意：box-sizing 应该在 parent 上指定，而不是 textarea。

不错...输入太有效..只选择无效...没关系...谢谢！

适用于 div 和大多数其他元素。不适用于文本区域。

【参考方案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%;

【讨论】：

当您希望在文本区域内进行 PADDING 时，它没有帮助。

【参考方案3】：

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

【参考方案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;

【参考方案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>