外边距叠加问题

Posted on   |   In   |  

1.前几天布局时候发现这么个问题: 外层div包含内层div 仅内层div有margin(仅想对内层div做偏移), 但是这个margin值 同时也作用在了外层div上(把外层div也顶走了).

2.按着hasLayout的思路, 加了个overflow：hidden或display:inline-block,或float:left解决.

3.心想: 莫非chrome和ff也有hasLayout的问题?

查了一下<精通CSS>, 查得这也是”外边距叠加(Collapsing margins)”的一种

4.书上原文:

1
2
当一个元素包含在另一个元素中时(假设没有内边距或边框将外边距分隔开),他们的顶和/或底部外边距会发生叠加.
消化一下 也就是说触发条件是: 外部div没有padding 没有border, 而且与第一个子div之间没有任何间隔.

就是我刚遇到的情况

还有比较常见的”外边距叠加”情况:

1
当一个元素出现在另一个元素上边时,第一个元素的底边外边距与第二个元素的顶外边距与第二个元素的顶外边距发生叠加.

也就是说上边元素的margin-bottom和下边元素的margin-top合并, 这个一般都是float解决

5.书上的结论:

行内,浮动,绝对定位没有外边距叠加.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * 博文作者:ruantao1989{@}gmail.com
 * 引自博客:ruantao.duapp.com/blog
 */
.parent{
    height:100px;
    width:100px;
    background-color: red;
    overflow: hidden;/*按hasLayout的方式都可以float:left;display:inline-block, overflow的方式相对比较好*/
}
.sub{
    margin:25px 25px;
    height:50px;
    width:50px;
    background-color: blue;
}