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

Question

有没有办法给 div 元素在其边界内填充一些内容？例如，目前我的主要 div 元素中的所有文本都位于元素边框的边缘。作为本网站的一般规则，我希望文本和边框之间至少有 10 到 20 像素的空间。

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

原文由 NealR 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在这里看到很多答案，让您从 div 的宽度中减去和/或使用框大小调整，但您需要做的就是对相关 div 的子元素应用填充。因此，例如，如果您有这样的标记：

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

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

 #text {
    padding: 10px;
}

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

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

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

这将选择所有子元素并为它们分配所需的填充。这是一个正在运行的小提琴： https ://jsfiddle.net/CHCVF/3/

原文由 Dryden Long 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

您可以在此处阅读有关框大小调整及其整体浏览器支持的更多信息：

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

原文由 Joel 发布，翻译遵循 CC BY-SA 4.0 许可协议