水平布局的盒子,左右margin正常,两者距离为左右margin之和
1、外边距折叠现象-合并:
垂直布局的同级块级元素,上下margin会合并,两者距离为最大一方margin
解决方法:
①开发时,避免出现垂直布局的上下相邻块级元素之间同时出现margin-top、margin-bottom
2、外边距折叠现象-塌陷:
互相嵌套的块级元素,子元素的margin-top会作用在父元素之上会导致连带父元素一起往下移动
*解决方法:
①父元素设置border-top或者padding-top
②父元素设置overflow:hidden;
③转为行内块元素
④设置浮动

博客介绍了CSS中盒子布局的外边距情况。水平布局时,左右margin正常,间距为两者之和。垂直布局的同级块级元素,上下margin会合并,距离取最大一方。互相嵌套的块级元素,子元素margin-top会使父元素下移。还给出了相应的解决方法。

被折叠的 条评论
为什么被折叠?



