嵌套标签css属性设置问题

问题描述

问 题

图中2个正方形框框是2个section标签，红色的section嵌套在蓝色的section里面，我想让红色的section离蓝色的section顶部20px, margin-top: 20px; 写了这条css之后，效果却不是我想要的。 为什么红色的margin-top计算的方式不是以蓝色的section作为参照物？ 而是以蓝色的section的上一个同级块元素做参照物？？

如果我想要这个效果，是不是只能用position做绝对布局了?

解决方案

这个叫做margin collapse，为什么会发生外边距合并？
两个原因：
两个条件：
1.两个或多个边距没有被非空内容，padding，border，clear分隔开；
2.处于文档流中(也就是是说，被float和absoluate的元素不会发生)
所以只要破坏任意一个条件就可以，比如个父div或子div增加边框等等

这篇关于嵌套标签css属性设置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！