3.1 margin-top塌陷

Posted zijiang-4476

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3.1 margin-top塌陷相关的知识，希望对你有一定的参考价值。

3.1.1  在两个盒子嵌套时，内部的盒子设置的margin-top会加到外部的盒子上，导致内部盒子的margin-top设置失败，解决方法如下：

　　1.外部盒子设置一个边框

　　2.外部盒子设置一个overfow:hidden

　　3.使用伪元素类

　　

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin-top塌陷</title>
    <style>
        .clearfix:before{
            content: "";
            display: table;
            }
        .con{
            width: 300px;
            height: 300px;
            background-color: gold;
            /*border: 1px solid #000;方法1：加一个边框*/
            /*overflow: hidden;方法2：使用overflow*/
            /*方法3：使用伪元素*/
            
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: green;
            margin:100px auto;
            
        }
    </style>
</head>
<body>
    <div class="con clearfix">
        <div class="box"></div>
    </div>
</body>
</html>

 3.1.2 示意图

技术图片

以上是关于3.1 margin-top塌陷的主要内容，如果未能解决你的问题，请参考以下文章

margin-top塌陷问题

解决margin-top塌陷问题的六种方法

margin塌陷现象（即在内层设置margin-top无效的解决办法）

margin-top塌陷解决方法

第一个子元素使用margin-top 会出现外边距塌陷问题

盒子模型的塌陷