margin塌陷 | 零基础学HTML（十四）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

• 父子盒模型：一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度（父元素的width>=所有子元素width+padding+border+margin）如果不满足条件：要么多余的子元素掉下来不能排在一排，要么溢出父元素；

  • 特殊情况：盒模型自动内减：父子盒模型中，只有一个子元素，且子元素是类似<div>标签必须独占一行的，可以不设置子元素的width属性，子元素的width属性会自动加载父级元素的width

• margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部

• 父子元素塌陷：父子元素之间也会出现margin塌陷，父元素和子元素都设置了同方向margin-top值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生margin塌陷；或者父元素没设置margin-top，子元素设置了margin-top也会导致，父子元素一起向下塌陷了子元素设置的像素值

• 解决margin塌陷的方法：

  • ① 同级元素：如果两个元素垂直方向与间距，只需要设置一个元素，不要进行拆分

  • ② 父子元素：让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用子级的margin去踹出来，而是父级的padding挤出来

  • 水平方向是没有margin塌陷问题的