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值