20220318_CSS_

一、外边距合并及塌陷

1.外边距折叠现象_合并

场景：垂直布局的块级元素，上下的margin会合并

结果：最终两者距离为margin的最大值

解决：只给一个盒子设置margin

2.外边距折叠现象_塌陷

场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

结果：导致父元素一起往下移

解决：

（1）给父元素设置border-top或者padding-top（分隔父子元素的margin-top）

（2）给父元素设置overflow：hidden

（3）转换成行内块元素

（4）设置浮动

3.行内元素的内外边距问题

行内元素的内外边距margin padding

如果要通过margin和padding改变行内标签的垂直位置，无法生效。

行内标签的margin-top和bottom不生效。

二、CSS布局浮动

三、