margin常見問題

前言

本文主要總結了CSS margin的常見問題。包括margin的縱向重疊、margin空白标簽重疊以及margin傳遞問題。

margin縱向重疊

margin縱向重疊：小的margin會重疊到大的margin中，進而margin不疊加，隻以大值為準；

相鄰元素的margin-top 和 margin-bottom 會發生重疊；

頁面結構：

<div class="box1">
        box1
    </div>
    <div class="box2">
        box2
    </div>
           

頁面樣式：

.box1{
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            margin: 30px;
            background-color: green;
        }
           

box1、box2垂直方向距離為30px。

margin空白标簽重疊

margin空白标簽重疊：空白内容的P标簽、div标簽等也會重疊。

頁面結構：

<div class="box1">
        box1
    </div>
    <P></P>
    <P></P>
    <P></P>
    <P></P>
    <P></P>
    <div class="box2">
        box2
    </div>
           

css樣式：

.box1{
        width: 100px;
        height: 100px;
        margin: 20px;
        background-color: red;
    }
    .box2{
        width: 100px;
        height: 100px;
        margin: 20px;
        background-color: green;
    }
    p {
        margin: 20px;
    }
           

box1、box2垂直方向距離為20px。

margin傳遞

margin傳遞：在子容器和父容器頂部線相同時，上下margin會傳遞，左右margin不會傳遞。

解決方式也很簡單把margin換成padding，在父容器添加padding也可以達到同樣的效果。

頁面結構：

<div class="box1">
        <!-- 父元素 -->
        <div class="box2">
            <!-- 子元素 -->
            <P></P>
        </div>
    </div>
           

css樣式：

.box1{
            margin: 0;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        p {
            margin: 20px;
        }
           

p标簽margin值為20px時

将p标簽margin值設為0時：