子元素的边距[重复]

Posted 2023-03-06

【中文标题】子元素的边距[重复]

【英文标题】：Margin on child element [duplicate]

【发布时间】：2012-12-16 03:18:17

【问题描述】：

可能重复：Margin on child element moves parent element

我有一个包含子 div 的父 div。 Parent 是正文中的第一个元素，没有特定的 CSS 样式。当我设置

.child 
   margin-top: 10px;

最终结果是child 的顶部仍然与parent 对齐。我的父母没有将child 向下移动 10px，而是向下移动了 10px。

我发现向parent 添加填充可以工作，但我读到这不是解决问题的方法。为什么？如果我想要margin-right，我可以在parent 上执行padding-right，同样，如果我想要margin-top，我也可以执行padding-top 并得到正确的结果。

在margin on child element moves parent element有人说：

如果您想要最高利润怎么办...？不是真正的解决方案。如果需要上边距，这并不是真正的解决方案。

他想说什么？请解释一下。

【问题讨论】：

你指的是这条评论吗？ ***.com/questions/1762539/… 如果你是，那么复制原始问题并像那样粘贴它是不合适的，甚至没有原始问题的链接。

我建议您对那个答案/问题发表评论，而不是仅仅为了讨论对另一个问题的答案的评论而提出一个全新的问题，然后添加赏金问题以引起人们的注意。如果您没有创造赏金的声誉，那么为社区增加价值的少量工作是有序的，坦率地说，如果您有任何价值可以增加，也不会花费很多时间。

@ErikE：嗯，他也没有添加 cmets 的声誉。

@BoltClock 我想这是一个很好的观点，尽管我认为这并没有真正改变方程式。如果无法使 cmets 将这些 cmets 转移到注定要关闭的问题上，那么这个人就会被不情愿地以对网站不健康的方式被关押。无论如何......我认为应该付出努力来赢得代表来制作这些cmets（并提供赏金）。 :)

@ErikE：确实。提出一个全新的问题并不是一个非常正当的理由，但我可以理解他为什么会这样做。

【参考方案1】：

来自 Mozilla 开发者网络上的 CSS Margin Collapsing：

父母和第一个/最后一个孩子

如果没有边框、内边距、内联内容或间隙来将块的 margin-top 与其第一个子块的 margin-top [...] 分开，那么这些边距会塌陷。折叠的边距最终在父级之外。