CSS 外边距塌陷

解决方案

1. 设置父盒子边框

2. 设置父盒子内边距

3. 设置父盒子的overflow

4. 设置父盒子或内部盒子的浮动属性

什么是外边距塌陷？

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

1. 通过border解决

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

2. 通过padding解决

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

3. 通过overflow解决

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

4. 通过浮动解决

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