<div style="margin-bottom:50px;background-color:#f00;height:100px;"></div>
<div style="margin-top:80px;background-color:#00f;height:100px;"></div>
页面中，上div的下边距 margin-bottom 为50px. 下div的上边距 margin-top:80px.
实际显示只有80px，原因是下div的上边距包含了上div的下边距。
同理：如果上div的下边距为80px，下div的上边距为50px，那两个div之间的距离也为80px.
总结：出现两个div都设置了 margin的上下边距时，这两个div之间的距离不是累加而是取边距设置的比较大那一个。
本文详细解析了CSS中当两个相邻div元素同时设置了上下边距(margin)时，实际显示的距离并非两者相加，而是取较大值的现象。通过具体例子说明了这一特性，并解释了背后的原因。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
