css - 为什么父元素不能包裹子元素的margin值？

问题描述

问 题

div.inside是父元素,h2是其子元素，h2设置了margin-top：20px;
第一张图片的蓝色区域，就是父元素的高度，但是从第二张图片可以看出，父元素
的高度没有包裹子元素的margin-top,这是为什么啊？

解决方案

这个问题发生的原因是根据规范：一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒

子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.

就会不断一层一层的找自己领导(父元素，祖先元素)的麻烦。只要给领导设置个有效的border或者padding就可以

有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。对于垂直外边距

合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这

个问题。

详细的内容参考博文：http://www.cnblogs.com/az96/p...

这篇关于css - 为什么父元素不能包裹子元素的margin值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！