CSS 解决外边距塌陷

常见解决方案

• 设置父盒子边框
• 设置父盒子内边距
• 设置父盒子的overflow
• 设置父盒子或内部盒子的浮动属性

什么是外边距塌陷？

有两个嵌套关系的 <div>，想让内部的 <div> 距离外部<div> 顶部100px，这个时候时候, 如果直接给内部 <div> 加 margin-top:100px; 就会出现下图情况, 内部 <div>并没有单独下移，而是父 <div> 跟着一起下来了, 这个现象就是外边距塌陷。

通过设置父盒子边框解决

在给内部 <div> 设置 margin-top 的基础上, 还要给父 <div> 设置一个透明边框。效果如下图, 但是仔细看会发现, 虽然父 <div> 的边框是透明的, 但是仍然会占有 1px; 实际使用时, 要注意调整。

通过设置父盒子内边距解决

不设置内部 <div>的 margin-top, 而是给父 <div> 设置 padding-top: 100px; 通过内边距的方式实现效果。但是要注意的是, 默认情况下给父 <div> 设置内边距, 会导致盒子撑大, 所以要设置 box-sizing: border-box; 使父盒子大小不变。

通过设置父盒子的 overflow 解决

在给内部 <div> 设置 margin-top 的基础上, 还要给父 <div>, 设置一个 overflow: hidden 属性, 也能实现效果。

通过设置父盒子或内部盒子的浮动属性解决

给内部 <div> 设置 margin-top 的基础上, 给内部 <div> 或者父 <div> 设置 float: left; 浮动属性, 也可以实现效果