Html/CSS margin-top穿透传递（子元素设置mar

logo

1.出现现象

给子元素设置margin-top后子元素和父元素之间没有间距，反而父元素和其他元素之间有了间距，和直接设置到父元素上效果一样。这样的现象叫margin传递。现象是父元素偏移，但并不是会把这个值设置给父元素，在元素检查的时候父元素的margin并没有改变，margin还是在子元素上，只是显示不符合预期。
穿透只出现在上下margin属性，左右margin属性不会有穿透现象。

2.出现条件

经过测试发现，这样的现象出现有2个条件：

条件一：父、子元素必须都为块级元素。
条件二：父、子元素必须顶部线重合。

这两个条件同时满足时，margin-top即出现传递现象。

3.解决方案

打破任意出现条件即可。

方案一：父元素 或者 子元设置display:inline-block ，打破条件一。

方案二：设置父元素padding-top 1 px ，打破条件二。

方案三：设置父元素border-top，打破可穿透条件（可理解为border 为内 容和margin中间的部分（参考盒子模型从内而外: content --> padding --> border --> margin），子元素设置margin后有父元素的border挡着不能直接穿透到父元素的margin）。

4.本质原因

出现这样问题的本质原因是对属性的理解有偏差。
子元素设置margin 和 父元素设置padding 能达到相同的展示效果，但是其使用场景应当有所区分。

父子元素之间应当使用padding，兄弟元素之间应当使用margin。

5.注意

在方案二中，不能通过添加一个空元素达到效果，因为会引起margin折叠 collapse

6.margin-bottom穿透传递

出现条件比margin-top多了一个父元素的高度必须是auto的。即父元素不手动指定高度，随内容自动改变。
解决方案和margin-top穿透类似，打破条件即可。请读者自行体会。