Margin合并问题及解决方案

55次阅读

共计 1626 个字符,预计需要花费 5 分钟才能阅读完成。

前言

在标准文档流中,如果两个竖直方向的 margin 直接接触,中间没有 border、padding 或者 content 隔开就会发生 margin 合并、或者 margin 塌陷现象。

而发生两个竖直方向的 margin 直接接触通常有两种情况:

  1. 父子关系的块级元素。(margin 塌陷)
  2. 兄弟关系的块级元素。(margin 合并)

margin 塌陷

margin 塌陷现象通常出现在嵌套关系(父子关系)的块级元素。父元素与子元素的 margin-top 直接接触,这时如果给子元素设置一个 margin-top,会发现父元素也跟着下来了。

代码如下:

<body style="background: grey;">
  <div style="height: 500px;background: blue;">
    <div style="height: 200px;background: green;margin-top:50px;"></div>
  </div>
</body>

效果如下:

margin 合并

margin 合并现象通常出现在兄弟关系的块级元素。两个兄弟元素的 margin-bottom 与 margin-top 直接接触,这时候会取较大的 margin。

代码如下:

<body style="background: grey;">
  <div style="height: 500px;background: blue;">
    <div style="height: 200px;background: green;margin-bottom: 10px;"></div>
    <div style="height: 200px;background: green;margin-top:50px;"></div>
  </div>
</body>

效果如下:

解决方案

关于 margin 塌陷及 margin 合并的解决方案大概可以分为两个方向:

  1. 避免竖直方向的的 margin 直接接触。简单来说就是用 border、padding 或者 content 将两个直接接触的 margin 隔开。
  2. 让其脱离标准文档流,而脱离文档流的方法就是触发 BFC。

具体解决方案在附录。

BFC

BFC 全称为 Block Formatting Context(块级格式化上下文)。简单来说就是,提供了一个环境,这个环境中的元素不会影响到外面的布局。

触发 BFC 的方法

  1. float 属性不为 none
  2. position 属性为 absolute 或 fixed
  3. display 为 inline-block、table-cell、table-cation、flex、inline-flex
  4. overflow 不为 visible

附录

Margin 塌陷解决方案

避免竖直方向的 margin 直接接触

  1. 用 border 隔开

    
    
  2. 用 padding 隔开

    
    
  3. 用 content 隔开

    
    
    content

触发 BFC

<body style="background: grey;">
  <div style="height: 500px;background: blue;overflow: hidden;">
    <div style="height: 200px;background: green;margin-top: 50px;"></div>
  </div>
</body>

margin 合并解决方案

避免竖直方向的 margin 直接接触

  1. 用 border 隔开

    
    
  2. 用 padding 隔开

    
    
  3. 用 content 隔开

    
    
    content

触发 BFC

<body style="background: grey;">
  <div style="height: 500px;background: blue;">
    <div style="height: 200px;background: green;margin-bottom: 10px;"></div>
    <div style="overflow: hidden;">
      <div style="height: 200px;background: green;margin-top: 50px;"></div>
    </div>
  </div>
</body>
正文完
 1
dkp
版权声明:本站原创文章,由 dkp 2023-04-09发表,共计1626字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。