css_day04_margin垂直方向的合并现象

html结构：

<span class="hezi1">我是span01标签</span><span class="hezi2">我是span02标签</span>
<div1 class="div01">我是div01标签</div1>
<div2 class="div02">我是div02标签</div2>

css样式部分：

  <!--
    注意：垂直方向的margin会有合并现象，哪个margin大就听哪个的。
    -->

        *{
            margin: 0;
            padding: 0;
        }
        .hezi1{
            display: inline-block;
            width: 100px;
            height: 100px;
            margin-right: 50px;
            border:1px solid red;
        }
        .hezi2{
            display: inline-block;
            width:100px;
            height:100px;
            margin-left: 100px;
            border:1px solid red;
        }
        /*
                hezi1: margin-right: 50px;  加上  hezi2: margin-left: 100px; 结果为150
        */
        .div01{
            width: 100%;
            display: block;
            height: 100px;
            margin-bottom: 50px;
            border:1px solid #000;
        }
        .div02{
            width: 100%;
            display: block;
            height: 100px;
            margin-top: 100px;
            border:1px solid #000;
        }
        /*
        div01: margin-bottom: 50px;  加上  div02: margin-top: 100px; 结果为100   因为垂直方向发生了margin的合并现象
        */