外边距的折叠现象

一.合并现象

垂直排列的盒子,如果同时加了margin,上下的margin会合并.最终两者的距离为margin的最大值

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

二.塌陷现象

互相嵌套的块级元素,子元素的margin-top会作用到父元素身上.导致父元素一起往下移动

解决办法:

1.给父元素设置borde-top或者padding-top(分隔父子元素的margin-top)

2.给父元素设置overflow:hidden(这个方法最好)

3.转换成行内块元素

4.设置浮动

三.行内元素的垂直内外边距

行内元素的内外边距,左右可以实现,要想通过margin或padding改变行内标签的垂直位置,无法生效

如果想要改变垂直位置可以通过line-height行高进行改变