深入理解margin

喝冬瓜湯的丁小白發表於2019-01-08
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            width: 500px;
            height: 500px;
            background-color: darkgray;
            /*border: 1px solid;*/
            /*padding-top: 1px;*/
            /*margin-left: 10px;*/
            /*margin-top: 150px;*/
        }
        .son{
            width: 100px;
            height:100PX;
        }

        .son1{
            background-color: chartreuse;
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 10px;

        }

        .son2{
            background-color: violet;
            display: inline-block;
            margin-left: 50px;

        }

        .son3{
            background-color:red;
            margin-top: 50px;
            display: inline-block;
            margin-bottom: 10px;
            margin-right: 50px;
        }
        .son4{
            background-color: aqua;
            margin-top: 50px;
            margin-left: 50px;
        }
    </style>

</head>
<body>
<!--margin重疊問題-->

<div class="parent">
    <!--1.同級元素之間重疊-->
    <!--1.1水平方向margin重疊相加-->

    <!--<span class="son1">son11</span>-->
    <!--<span class="son2">son12</span>-->

    <!--1.2垂直方向margin重疊取大值-->

    <!--<div class="son son1">son1</div>-->
    <!--<div class="son son2">son2</div>-->
    <!--<div class="son son3">son3</div>-->
    <!--<div class="son son4">son4</div>-->

    <!--1.3解決垂直方向重疊問題-->
    <!--BFC-->
    <!--float的值不為none-->
    <!--overflow的值不為visible-->
    <!--display的值為inline-block、table-cell、table-caption-->
    <!--position的值為absolute或fixed-->
    　　
    <!--2.父子元素之間重疊-->
    <!--2.1水平方向margin重疊-->
    <!--2.2水平方向margin重疊-->

    <!--<div class="son son4"></div>-->

    <!--2.3解決垂直方向重疊-->
    <!--給父元素新增padding-top值-->
    <!--給父元素新增border值-->
    <!--BFC-->
    <!--3.margin百分比-->
    <!--普通元素的百分比margin：都是相對於父元素的寬度計算的-->
    <!--4.margin無效的情況-->
    <!--inline水平元素的垂直margin無效-->
    <!--display: table-cell的元素margin無效-->
</div>
</body>
</html>```

相關文章