Question

有没有办法给div元素一些填充内边框？例如，当前主div元素内的所有文本都直接到元素边框的边缘。作为这个网站的一般规则，我想在文本和边框之间留出至少10到20像素的空间。

这是一个屏幕截图，用于说明我目前拥有的内容：

enter image description here

Answer 1

我在这里看到很多答案，你可以从div的宽度中减去和/或使用box-sizing，但你需要做的就是应用填充div的子元素。所以，例如，如果你有这样的标记：

<div id="container">
    <p id="text">Find Agents</p>
</div>

您需要做的就是应用此CSS：

#text {
    padding: 10px;
}

这是一个显示差异的小提琴：http://jsfiddle.net/CHCVF/2/

或者，更好的是，如果你有多个元素并且不想给它们所有相同的类，你可以这样做：

.container * {
    padding: 5px 10px;
}

将选择所有子元素并为其指定所需的填充。这是行动中的一小部分：http://jsfiddle.net/CHCVF/3/

Answer 2

您要查找的CSS属性是填充。填充的问题在于它增加了原始元素的宽度，因此如果你有一个宽度为300px的div，并为其添加10px的填充，宽度现在将是320px（左边10px，左边10px）右边）。

要防止这种情况，您可以添加box-sizing：border-box;到div，这使得它保持指定的宽度，即使你添加填充。所以你的CSS看起来像这样：

div {
    box-sizing: border-box;
    padding: 10px;
}

你可以在这里阅读更多关于盒子大小的信息以及它的整体浏览器支持：

Answer 3

只需使用div { padding: 20px; }并从原始40px宽度中减去div。

就像Philip Wills指出的那样，您也可以使用box-sizing代替40px：

div {
    padding: 20px;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

-moz-box-sizing适用于Firefox。

Answer 4

填充是一种在Div内添加保证金的方法只需使用

div { padding-left: 20px; }

为了保持尺寸，你必须从Div的原始宽度到-20px。