Margin Collapsing：外边距折叠 | CSS

本章覆盖：vertical margin collapsing；sibling margins；parent / first child；empty block；为什么 horizontal margin 不同样 collapse；BFC / flow-root 等对 collapse 的影响；“margin 明明 20px 为什么不是 40px”；不靠魔法数字修复 margin collapse；在现代组件布局中优先使用 gap 的场景。

本章知识点

  • vertical margin collapsing
  • sibling margins
  • parent / first child
  • empty block
  • 为什么 horizontal margin 不同样 collapse
  • BFC / flow-root 等对 collapse 的影响
  • “margin 明明 20px 为什么不是 40px”
  • 不靠魔法数字修复 margin collapse
  • 在现代组件布局中优先使用 gap 的场景