Html 父容器和子容器之间的间距应属于父容器还是子容器？

我正在努力确定CSS中的填充/边距应该放在哪里，以保持父容器和子容器之间的分离。例如，如果您有一个具有两个嵌套子级的父级

div

，则子级之间甚至需要有

10px

间距，并且子级与父级之间的间距

10px

；然后，您是否将填充添加到父级

div{padding:10px}

，然后在子级之间添加

10px

？或者你会让父母在

0

padding处，让孩子们定义他们彼此之间以及他们父母之间需要什么样的分离

，以及显示相同内容的片段

.parent1{/*将自身与其子对象隔开*/
显示：内联块；
填充：10px；
字号：0；
边框：1px纯红；
}
.儿童1{
显示：内联块；
右边距：10px；
字号：12号；
边框：1px纯蓝色；
}
.儿童2{
显示：内联块；
字号：12号；
边框：1px纯绿色；
}
.parent2{/*与其子项之间没有间隔*/
显示：内联块；
字号：0；
边框：1px纯红；
}
.儿童3{
显示：内联块；
利润率：10px；
字号：12号；
边框：1px纯蓝色；
}
.儿童4{
显示：内联块；
右边距：10px；
字号：12号；
边框：1px纯绿色；
}

孩子1
孩子2




孩子3
孩子4

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

我刚刚验证了，margin属性在嵌套DIV中也起作用。 因此，这是填充的替代方案

但是，如果类中的位置是绝对的，那么填充就不重要了。但是 如果使用绝对位置，则所有DIV都必须 避免潜在冲突的绝对立场 了解客户的最小屏幕大小（绝对可能不是一个好主意）

注意：如果您的任何客户端仍在使用IE5，则该浏览器 有一个应该在IE6中修复的填充错误。

---

我通常在父容器上填充。然后是孩子们之间的距离。例如，如果我的

ul

有10个

li

子项，我会在

ul

中添加

10px

填充，在

li

中添加

10px

边距底部，在

li:type

的最后一个中添加

0px

边距底部

我不知道，它随情况而变化，我想你对它的解释也是如此。在我的例子中，因为我相信

ul

和

li

之间的空间属于

ul

，所以我将其作为

ul

的填充。

li

s之间的空格属于它们，因此我将其作为它们的边距

没什么帮助，对我来说，这完全取决于所讨论的节点的语义-什么是父节点，什么是子节点

父级是否“希望”其中的空间使其内容远离边框（填充）？或者孩子们是否“想要”他们与父母之间的距离（边际）

这些问题的答案基于每个节点所服务的目的（我热衷于语义标记，避免使用表示性标记）

---

在你的例子中，在不知道进一步的含义的情况下，听起来孩子们想从每件事中得到10px，所以我会给他们

margin:10px在所有侧面。这两个孩子之间的差距缩小了，只剩下10像素的差距，他们与周围的一切都相距10像素。
大家好，我不是HTML专家，我是学习者，所以我从网络行业学到了什么，我代表他们分享

根据我的理解，填充是元素的内部空间，边距是元素的外部空间

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

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

或者查看更新的小提琴示例，我在子容器中使用了边距，因为当我在父容器中使用填充时，我调整了边距的宽度和高度，但当我使用边距时，不需要调整父容器，请参见演示：-

谢谢你的解释，但我知道两者的区别。我试图理解的是，通过填充来提供父子间距是否是更好的CSS实践，或者通过填充/边距来提供子间距是否更好。如果你看小提琴，这两种方法都是可能的，但我追求的是最佳实践。如果你担心页面上的垂直边距，那么填充需要在父页面中。我观察到了这一点。doctype.com/margin-child-element-moves-parent-element reference.sitepoint.com/css/collazingmargins如果您试图对页面上的内容进行这种像素级控制，那么父元素中的填充和/或边距将是有意义的。在子容器中添加边距可能会导致父容器四处移动。此外，当您将填充添加到父容器中时，您将始终确保您添加的每个子容器都将与您希望的位置对齐（假设您没有为相同的目的向子容器添加边距）。有趣的答案。所以我的情况很基本。我的父项是页面布局的主要内容部分（带有侧栏和页眉/页脚）。我的孩子们就是我在里面放置的所有div，并且有一些嵌套的div（ch