您的位置：首页 > 运维架构

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

2017-03-15 14:52 211 查看

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

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

http://blog.csdn.net/man_tutu/article/details/54987177

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

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

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

下面的是我的CSS代码：

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

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

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

大家可以看到，这里子元素的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;
}

实现效果：

2、为父元素设置border：

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

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

实现效果：

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

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

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

实现效果：

<
4000
img src="https://img-blog.csdn.net/20170315144512881?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFuX3R1dHU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="">

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css margin-top 外边距合并 bug

相关文章推荐

新的分享

章节导航