margin的垂直方向塌陷

時間 2019-12-12

標籤 margin 垂直方向欄目 CSS 简体版

原文原文鏈接

標籤（空格分隔）： margin塌陷css

margin垂直方向塌陷問題：

以下代碼：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin塌陷</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;



        }
       .box1{
           width:300px;
           height:200px;
           background-color:red;
       }
        .box2{

            width:400px;
            height:300px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>

    </div>

</body>
</html>

執行結果爲：
python

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin塌陷</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;



        }
       .box1{
           width:300px;
           height:200px;
           background-color:red;
           margin-bottom: 20px;
       }
        .box2{

            width:400px;
            height:300px;
            background-color: green;
            margin-top: 50px;

        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>

    </div>

</body>
</html>

如上述代碼的編寫過程以下，查看紅色盒子和綠色盒子中間的間距爲50px;3d

總結：若是是margin裏面的設置下邊的margin設置較大，咱們能夠看作兩個盒子，一個是大盒子一個是小盒子，大盒子裝着小盒子；
經過上述的例子能夠看到，兩個何止之間的間距爲50px;

問題2:
若是咱們設置浮動呢結果仍是這樣的嗎？code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin塌陷</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .father{

            width:400px;
            overflow: hidden;
            border:1px solid grey;

        }
       .box1{
           width:300px;
           height:200px;
           background-color:red;
           margin-bottom: 20px;
           float:left;
       }
        .box2{

            width:400px;
            height:300px;
            background-color: green;
            margin-top: 50px;
            float:left;


        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>

    </div>

</body>
</html>

總結：上述的浮動，不存在塌陷問題（即取較大值的問題），中間的高度爲margin的和；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。