为子元素设置margin-top会作用在父元素上？

阅读数：1437

这个其实是 CSS 外边距合并产生的问题。

关于 CSS 的 margin 的详细问题，我已经在我之前的博文中详细的讲过了，有兴趣的可以直接点击这个链接：

http://blog.youkuaiyun.com/man_tutu/article/details/54987177

言归正传，让我们来看一下这次的问题：

这是我的HTML代码，非常的简洁：

<div id='father'>
    <div id="son"></div>
</div>

• 1
• 2
• 3

下面的是我的CSS代码：

#father {
    width: 300px;
    height: 300px;
    background: orange;
}

#son {
    width: 100px;
    height: 100px;
    margin: 50px;
    background: red;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

那么最后产生的结果如下：

大家可以看到，这里子元素的margin-top顶开了父元素与父元素相邻元素的间距。

那么这个问题要怎么解决呢？

我所知道的有三种方法： 
1、为父元素设置padding。 
2、为父元素设置border。 
2、为父元素设置 overflow: hidden 。

1、为父元素设置padding：

#father {
    width: 300px;
    height: 300px;
    background: orange;
    padding: 1px;
}

#son {
    width: 100px;
    height: 100px;
    margin: 50px;
    background: red;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

实现效果：

2、为父元素设置border：

#father {
    width: 300px;
    height: 300px;
    background: orange;
    border: 1px solid #000;
}

#son {
    width: 100px;
    height: 100px;
    margin: 50px;
    background: red;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

实现效果：

3、为父元素设置 overflow: hidden ：

#father {
    width: 300px;
    height: 300px;
    background: orange;
    overflow: hidden;
}

#son {
    width: 100px;
    height: 100px;
    margin: 50px;
    background: red;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

实现效果：