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

margin-top塌陷现象解决方案

2017-07-28 18:35 573 查看

发生塌陷现象的条件：两个盒子为父子关系

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
height: 500px;
background: red;
}
.son{
width: 200px;
height: 200px;
background: blue;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>



以上是margin-top发生塌陷时代码

如下图所示



解决方案：

    1.给父盒子添加border，加上边框border既可以

    2.给父盒子添加padding-top

    3.给父盒子添加overflow:hidden

    4.父盒子:position:fixed

    5.父盒子:display:table

    6.给子元素的前面添加一个兄弟元素

       属性为:content:"";


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航