码迷,mamicode.com
首页 > 其他好文 > 详细

3.1 margin-top塌陷

时间:2020-01-04 10:28:12      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:tle   har   lan   code   元素   图片   spl   解决方法   isp   

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塌陷

标签:tle   har   lan   code   元素   图片   spl   解决方法   isp   

原文地址:https://www.cnblogs.com/zijiang-4476/p/12148067.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!