外边距折叠现象

盛情不难却
102 阅读2分钟

1. 外边距折叠现象-①合并现象

  • 场景：垂直布局的块级元素，上下的margin会合并
  • 结果：最终两者距离为margin的最大值
  • 现象：如图所示

image.png

  1. 给box1添加margin-bottom，box2下移50px image.png

  2. 给box2添加margin-top，box2下移50px image.png

  3. 给box1、box2添加均为正数的margin-bottom、margin-top，box2移动两个值中的最大值 image.png

  4. 给box1、box2添加均为负数的margin-bottom、margin-top，box2移动两个值中绝对值的最大值 image.png

  5. 添加正数或负数的margin-bottom，以及正数或负数的margin-top，box2移动两个值的和 image.png

  • 解决办法：只给其中一个盒子设置margin即可

2. 外边距折叠现象-②塌陷现象

  • 场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
  • 结果：导致父元素一起移动
  • 现象：如图所示

image.png

  1. 在子元素中设置margin-top,子元素和父元素同时向下移动50px

image.png

  1. 在父元素中设置margin-top,子元素和父元素同时向下移动50px

image.png

  1. 在父子元素中设置相同的margin-top值,子元素和父元素同时向下移动50px

image.png

  1. 在父子元素中设置不同的正margin-top值,子元素和父元素同时向下移动最大的margin-top值

image.png

  1. 在父子元素中设置不同的负margin-top值,子元素和父元素同时向上移动绝对值最大的margin-top值

image.png

6.在父子元素中设置一正一负的margin-top值,子元素和父元素同时移动两值之和的值

image.png

  • 解决办法：
  1. 给父元素设置 border-top 或者 padding-top
  2. 给父元素设置 overflow：hidden
  3. 转换成行内块元素
  4. 设置浮动
avatar
文章
阅读
粉丝