解决margin塌陷问题

最新推荐文章于 2022-10-22 00:48:12 发布

qinchao888

最新推荐文章于 2022-10-22 00:48:12 发布

阅读量673

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/GreyBearChao/article/details/78328926

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

magin塌陷：在普通文档流中，当一个元素被包含在另一个元素中时，子元素设置margin-top无效。

源代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"> 
<style> 
body{margin:0;padding:0;}
.fu{background-color:pink;width:400px;height:400px;}
.zi{background-color:skyblue;width:100px;height:100px;margin-top:40px;}
/*margin-top设置无效*/
</style>
</head>
<body>
<div class="fu">
    <div class="zi"></div>
</div>
</body>
</html>

方式一：

//给父元素设置overflow：hidden
.fu{
    overflow: hidden;
}

方式二：

//给父元素设置一个border,不可为0和none
.fu{
    border: 1px solid transparent;
}

方式三：

//增加一个子元素，置于class="zi"的元素之前

<div class="fu">
    <span></span>
    <div class="zi"></div>
</div>

//css代码
span{
    display: inline-block;
    width:0;
    height:0;
}