【外边距合并问题】-- 对于第一个子元素的margin-top问题

原创 zxf_jessica 随笔 css问题合集 61阅读 2018-01-16 17:22:58 举报

html 代码

预览以上代码,似乎并不是我们想要的结果,我们想要的是this(类名)元素顶部距离this-wrapper(类名)元素顶部20个像素,而不是this-wrapper元素距离顶部20个像素.
这是外边距合并的问题,这个问题的产生是根据规范,如果一个盒子没有有效的上补白(padding-top)或者是上边框(border-top),那么该盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠
为了解决这个问题,有以下几种方式:
1、给该元素设置overflow:hidden
2、给该元素设置有效的padding-top
3、给该元素设置有效的border-top

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复