为何内部<p>元素的外边距未被父级<div>包裹而溢出？

这是CSS中**外边距折叠（Margin Collapse）**的典型表现。

原因说明： #

当块级父元素满足以下条件时，第一个子元素的顶部外边距（或最后一个子元素的底部外边距）会和父元素的外边距发生折叠：

1. 父元素没有设置 padding 或 border 来分隔子元素的外边距
2. 父元素没有触发 BFC（块格式化上下文）
3. 父元素和子元素之间没有内联元素（比如文字、空格）作为分隔

你的代码里，<p> 元素是浏览器默认带有上下外边距的（从截图能看到计算后的 margin-top/margin-bottom 不为0），而父 <div class="no-margins"> 既没有 padding/border，也没触发BFC，所以<p>的外边距会“穿透”父元素，看起来像是跑到了父元素外面。

解决方案（任选其一即可）： #

• 触发父元素的BFC（最推荐无副作用的方式是用display: flow-root）：

  .no-margins {
      margin: 0;
      display: flow-root;
  }
  

• 给父元素添加微小的padding（不影响布局但能分隔外边距）：

  .no-margins {
      margin: 0;
      padding: 0.1px;
  }
  

• 给父元素添加border：

  .no-margins {
      margin: 0;
      border: 1px solid transparent;
  }
  

内容的提问来源于stack exchange，提问作者David Thielen