Web前端学习—基础篇(15)_如何解决margin值叠加的问题
前端学习——基础篇
四、CSS学习
4.5盒模型
4.5.3、margin值的塌陷问题
4.5.3.1、并列关系的外间距塌陷问题
现象：并列关系的、垂直方向相邻的两个margin外间距相遇，会出现叠加现象。两个值相同，取当前值；两个值不同，取较大值
原因：并列关系的两个元素共用一个外间距区域
解决：
(1)为两个元素套父级盒，为父级盒设置overflow:hidden;属性
(2)将两个元素分别触发BFC.
4.5.3.2、嵌套关系的外间距塌陷问题
现象：嵌套关系的元素，子元素设置margin-top属性，会叠加给父元素
原因：父盒和子盒共用一个外间距区域
解决：
(1)为父级盒设置上边框或上内填充
(2)为父级盒设置overflow:hidden属性
(3)转换思路，巧用padding，规避margin值
