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值