Html 用于在 div 内填充文本的 CSS 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20505008/
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
CSS property to pad text inside of div
提问by NealR
Is there a way to give a divelement some padding INSIDE its border? For example, currently all the text inside my main divelement goes right to the edge of the element's border. I'd like, as a general rule on this site, to have at least 10 to 20 px of space between the text and the border.
有没有办法在div元素的边界内给元素一些填充？例如，目前我的主div元素中的所有文本都位于元素边框的边缘。作为本网站的一般规则，我希望文本和边框之间至少有 10 到 20 像素的空间。
Here's a screen shot to illustrate what I currently have:
这是一个屏幕截图来说明我目前拥有的内容：
回答by Dryden Long
I see a lot of answers here that have you subtracting from the width of the div and/or using box-sizing, but all you need to do is apply the padding the child elements of the div in question. So, for example, if you have some markup like this:
我在这里看到很多答案，它们让您从 div 的宽度中减去和/或使用 box-sizing，但您需要做的就是对相关 div 的子元素应用填充。因此，例如，如果您有这样的标记：
<div id="container">
<p id="text">Find Agents</p>
</div>
All you need to do is apply this CSS:
您需要做的就是应用此 CSS：
#text {
padding: 10px;
}
Here is a fiddle showing the difference: http://jsfiddle.net/CHCVF/2/
这是一个显示差异的小提琴：http: //jsfiddle.net/CHCVF/2/
Or, better yet, if you have multiple elements and don't feel like giving them all the same class, you can do something like this:
或者，更好的是，如果您有多个元素并且不想给它们所有相同的类，您可以执行以下操作：
.container * {
padding: 5px 10px;
}
Which will select all of the child elements and assign them the padding you want. Here is a fiddle of that in action: http://jsfiddle.net/CHCVF/3/
这将选择所有子元素并为它们分配您想要的填充。这是一个实际操作的小提琴：http: //jsfiddle.net/CHCVF/3/
回答by Joel
The CSS property you are looking for is padding. The problem with padding is that it adds to the width of the original element, so if you have a div with a width of 300px, and add 10px of padding to it, the width will now be 320px (10px on the left and 10px on the right).
您正在寻找的 CSS 属性是 padding。padding 的问题在于它增加了原始元素的宽度，所以如果你有一个宽度为 300px 的 div，并为其添加 10px 的 padding，那么宽度现在将为 320px（左侧 10px，左侧 10px）正确的）。
To prevent this you can add box-sizing: border-box; to the div, this makes it maintain the designated width, even if you add padding. So your CSS would look like this:
为了防止这种情况，您可以添加 box-sizing: border-box; 到 div，这使它保持指定的宽度，即使您添加填充。所以你的 CSS 看起来像这样：
div {
box-sizing: border-box;
padding: 10px;
}
you can read more about box-sizing and it's overall browser support here:
您可以在此处阅读有关 box-sizing 及其整体浏览器支持的更多信息：
回答by Jarno
Just use div { padding: 20px; }and substract 40pxfrom your original divwidth.
只需使用div { padding: 20px; }并减去40px原始div宽度即可。
Like Philip Wills pointed out, you can also use box-sizinginstead of substracting 40px:
就像菲利普威尔斯指出的那样，您也可以使用box-sizing而不是减去40px：
div {
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The -moz-box-sizingis for Firefox.
的-moz-box-sizing是Firefox浏览器。
回答by GDSeabra
Padding is a way to add kind of a margin inside the Div.
Just Use
填充是一种在 Div 内添加边距的方法。
就用
div { padding-left: 20px; }
And to mantain the size, you would have to -20px from the original width of the Div.
为了保持大小，您必须从 Div 的原始宽度减去 -20px。
