logo
Published on

外边距折叠

  • Author Avatar
    Author
    Author Link
cssBFC

出现情况

当如下情况会出现 margin 折叠:

  1. 相邻的兄弟元素设置对向 margin 如下, 最终会合并为 margin: 30px
<div style="margin-bottom: 20px;">Box 1</div>
<div style="margin-top: 30px;">Box 2</div>
  1. 父元素和第一个/最后一个子元素 如下, 最终会合并为30px
<div style="margin-top: 20px;">
  <div style="margin-top: 30px;">Child</div>
</div>
  1. 空元素的上下 如下, 最终会 margin-top/bottom 均为 30px
<div style="margin-top: 20px; margin-bottom: 30px;"></div>

解决方案

方案一: 开启 BFC

  1. 设置 overflow 不为 visible
  2. 设置 display 为如下
    1. inline-block
    2. flex
    3. grid
    4. table-cell
  3. 设置 position 为非 static / relative
  4. 设置 float

块格式化上下文（Block Formatting Context, BFC）

BFC 是 CSS 中的一种布局规则，表示一个独立的渲染区域，在这个区域内，元素的布局不会影响外部的其他元素。换句话说，BFC 是一个独立的布局环境，它有自己的规则来处理子元素的排列和间距。

例如:

<div
  :class="[
    'w-full h-65 bg-cover bg-center mt-0 pt-1',
    `bg-[url('http://cdn.licuii.fun/self/lic-icon.png')]`,
  ]"
>
  <div class="px-[var(--view-padding)] mt-12"></div>
</div>

父元素和子元素属于同一个 BFC，导致外边距折叠。通过让父元素创建一个新的 BFC（如使用 overflow: hidden 或 display: flex），可以有效解决问题。

方案二: 为父元素/相邻元素设置 padding