Html 如何在不导致宽度增加的情况下向 textarea 添加填充？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4180827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add padding to a textarea without causing the width to increase?
提问by u365975
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 居中，但我希望用户仍然能够在鼠标悬停在空白边距之一上时滚动 textarea。出于同样的原因，我无法添加另一个 div 来充当包装器，因为用户将无法沿空白区域滚动，而只能沿无边距文本区域滚动。
Can anybody help?
有人可以帮忙吗？
回答by casablanca
The CSS box modeldefines "width" as the width of the content, excluding border, padding and margin.
的CSS盒模型定义的“宽度”作为内容的宽度，但不包括边界，空白和边距。
Fortunately, CSS3 has a new box-sizingproperty 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）都支持此属性，但它们在每个浏览器中的名称不同。
回答by Ninad
Specifying widths and margins/padding in '%' helps. Here is one example -
在 '%' 中指定宽度和边距/填充有帮助。这是一个例子——
Live @ http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result
直播@ http://jsfiddle.net/ninadpahpute/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%;
}
回答by iceT
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;
}
回答by Niet the Dark Absol
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 指定的宽度不包括 padding 或 border（符合 W3C 规范）。我想这样做的一种方法是使用一些 JavaScript 将 #editor 的宽度设置为 #body 的宽度减去 700px，但这有点混乱......不确定是否有一种 CSS 方式可以在这里做你想做的事情。当然，您可以使用边距，然后将 onMouseWheel 事件注册到 #body 并使用它...
