margin常见问题

margin纵向重叠

页面结构：

    <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空白标签重叠

页面结构：

    <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传递

页面结构：

    <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时：