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