用于填充div内部文本的CSS属性

Question

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

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

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 on正确的).

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

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

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

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

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浏览器.