CSS属性填充文本里面的文本

有没有办法给一个div元素一些填充内边框？例如，目前我的主要div元素中的所有文本都会右移到元素边框的边缘。作为本网站的一般规则，我希望在文本和边框之间至少有10到20像素的空间。CSS属性填充文本里面的文本

这里有一个屏幕截图来说明我目前有：

enter image description here

2013-12-10 NealR

将填充添加到div内的元素 –

我在这里看到了很多答案有你从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/

2013-12-10 21:11:09

这就是我所做的 - 创建了一个名为“contentContainer”的div，并给出了20px的填充。 thx – NealR

@NealR没问题，很高兴你知道了 –

如果你有多个容器，'.container *'不起作用。所有的内部容器也会得到可能不希望的填充。 –

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

像菲利普·威尔斯指出，你也可以使用box-sizing而不是从其减去40px：

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

的-moz-box-sizing是Firefox浏览器。

2013-12-10 20:56:47 Jarno

您是否也可以添加jsFiddle？ – frenchie

或添加框大小：边框...（而不是减去40） – philwills

@PhillipWills好思想，我把它添加到我的答案。 – Jarno

填充是在Div内添加一种边距的方法。
只是用

div { padding-left: 20px; }

并以十个分量的大小，你就必须从事业部的原有宽度-20px。

2013-12-10 21:01:31 GDSeabra

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

为了防止发生这种情况，您可以添加框尺寸：border-box;到div，这使得它保持指定的宽度，即使你添加填充。所以你的CSS是这样的：

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

你可以阅读更多有关箱尺寸和在这里的整体浏览器支持：

2013-12-10 21:04:20 Joel

回答