父容器和子容器之间的间距应该属于父容器还是子容器？答案

【问题标题】：Should the spacing between parent and child containers belong to parent or child?父容器和子容器之间的间距应该属于父容器还是子容器？
【发布时间】：2012-04-12 14:40:38
【问题描述】：

我正在努力确定我的 CSS 中的填充/边距应该放在哪里，以保持父容器和子容器之间的分隔。例如，如果您有一个父级 div 和两个嵌套的子级，并且您需要在子级之间设置均匀的 10px 间距，并且还要让子级与父级之间的间距为 10px；那么你会在父级div {padding:10px} 中添加填充，然后在子级之间添加10px 的边距吗？或者您会将父母留在0 padding 并让孩子们定义他们需要与彼此以及他们的父母分开什么？

Here's the original fiddle showing both examples 和一个显示相同内容的 sn-p

.parent1 { /*spaces itself from its children*/
    display: inline-block;
    padding: 10px;
    font-size: 0;
    border: 1px solid red;
}
.child1 {
    display: inline-block;
    margin-right: 10px;
    font-size: 12pt;
    border: 1px solid blue;
}
.child2 {
    display: inline-block;
    font-size: 12pt;
    border: 1px solid green;
}
.parent2 { /*has not spacing from its children*/
    display: inline-block;
    font-size: 0;
    border: 1px solid red;
}
.child3 {
    display: inline-block;
    margin: 10px;
    font-size: 12pt;
    border: 1px solid blue;
}
.child4 {
    display: inline-block;
    margin-right: 10px;
    font-size: 12pt;
    border: 1px solid green;
}

<div class="parent1">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>
<br/>
<br/>
<div class="parent2">
    <div class="child3">child3</div>
    <div class="child4">child4</div>
</div>

【问题讨论】：

标签： html css padding margin spacing

【解决方案1】：

对我而言，它完全取决于所讨论节点的语义——是父节点，是子节点？

父级是否“想要”其中的空间以使其内容远离其边界（填充）？还是孩子们“想要”他们与父母之间的距离（边缘）？

这些问题的答案基于每个节点服务的目的（我很喜欢语义标记并避免表示性标记）

在你的情况下，在不知道进一步的含义的情况下，听起来孩子们想要远离一切，所以我会给他们margin: 10px;。两个孩子之间的边距塌陷只会留下 10px 的间隙，并且它们将与周围的其他一切相距 10px。

【讨论】：

有趣的答案。所以我的情况很基本。我的父母是页面布局的主要内容部分（带有侧栏和页眉/页脚）。然后，我的孩子将只是我定位在里面的所有 div，并且有一些嵌套的 div（孩子中的孩子）。主要内容 div 内部是否应该有填充以避免子 div 触摸（假设这是我想要的并且它需要保持一致）？或者我应该确保所有不同的直接子级使用相同的边距/填充来保持它们与父主内容 div 边缘的距离？
似乎重复且容易出错，让孩子们都假设它的距离相同而重复它，所以在这种情况下我会选择父母的间距。将它放在父母身上的唯一缺点（我能想到的）是在某些情况下，我希望父母和一些奇怪的孩子之间的间距更小，在这种情况下，我不走运。想法？
我的工作方式不会重复或容易出错，因为我可能会制作所有这些孩子，比如<div class="section">，并有一个单一的风格，上面写着.section { margin: 10px; }（或div.section更多）具体目标）。可能还有<div class="tips section">之类的东西，所以它仍然是一个部分并获得边距，但会获得其他样式，因为它也是.tips
在对相关页面进行全面重新设计后，我得出的结论是您是对的，这完全取决于相关节点。我一开始默认在父级上使用它，但经常不得不根据情况切换它。

【解决方案2】：

我通常会在父容器上进行填充。然后是孩子之间的边缘。例如，如果我有一个 ul 和 10 个 li 孩子，我会将 10px 填充添加到 ul、10px 边距底部到 li 和 0px 边距底部到li:last-of-type...

我不知道，我猜它会随着情况和你对它的解释而变化。在我的示例中，因为我相信ul 和li 之间的空间属于ul，所以我将其设为ul 的填充。 lis 之间的空间属于它们，所以我将其设为它们的边距。

帮不上忙吧？

【讨论】：

此外，当您将填充添加到父容器时，您将始终确保您添加的每个子容器都将对齐到您想要的位置（假设您没有为子容器添加边距出于同样的目的）。

【解决方案3】：

CSS 边距属性在外部，而填充在 DIV 块内。我不确定这是否是你想要的 - 记录在这里：

When to use margin vs padding in CSS

我刚刚验证过，margin 属性在嵌套的 DIV 中也可以工作。所以这是填充的替代方法。

但是，如果类中的位置是绝对的，则填充无关紧要。但如果你使用绝对位置，所有的 DIV 都必须有绝对位置，以避免潜在的冲突，你会有知道客户端的最小屏幕尺寸（绝对可能不是一个好主意）。

注意：如果您的任何客户端仍在使用 IE5，则该浏览器有一个应该在 IE6 中修复的填充错误。 http://forums.devshed.com/css-help-116/css-padding-inside-absolute-div-70789.html

【讨论】：

感谢您的解释，但我知道两者之间的区别。我想了解的是，通过填充提供父子间距是否更好，或者通过填充/边距提供子间距是否更好。如果你看看小提琴，任何一种都是可能的，但我追求的是最佳实践。
如果您担心页面上的垂直边距，则填充需要在父级中。我观察到了这一点。 seifi.org/css/… css.flepstudio.org/en/css-box-model/… doctype.com/margin-child-element-moves-parent-element reference.sitepoint.com/css/collapsingmargins 如果您想对页面上的内容进行这种像素级控制，那么父级中的填充和/或边距是有意义的。子级有边距会导致父级移动。

【解决方案4】：

大家好，我不是 HTML 专家，我是学习者，所以我从网络行业学到了什么，所以我代表它分享。

据我所知，padding是元素的内部空间，margin是元素的外部空间。

填充：-如果您将在父容器中使用填充，则必须调整父容器的宽度和高度，否则父容器将在其宽度和高度中添加填充。

边距：-如果您将在子容器中使用边距，则无需触摸父容器的宽度和高度，因为子容器将从所需区域开始。

或查看您更新的小提琴示例，我在子容器中使用边距，因为当我在父容器中使用填充时，我调整了宽度和高度，但是当我使用边距时不需要调整父容器，请参阅演示:- http://jsfiddle.net/WSTv6/1/

& can read more about margin & padding

【讨论】：