深度行盒與行塊盒（空白，參考線，行盒右拉伸）

容器內的行塊盒和行盒

  <!-- test1: 關於行盒和行塊盒的空白摺疊問題 -->
    <!-- 行塊盒右邊的空白摺疊為一個 （操作：切換span2的display為inline ,往右書寫ggg1的位置）-->
    <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
        <span class="span1" style="display:block;font-size:32px;background-color:rgb(252, 240, 171);">ggg1
        </span>
        <span class="span2" style="display:inline-block;font-size:64px;background-color:rgb(252, 183, 171);">ggg1
        </span> ggg1

    </div>


    <!-- 行盒的右邊空白忽略 -->
    <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
        <span class="span1" style="display:block;font-size:32px;background-color:rgb(252, 240, 171);">ggg1
        </span>
        <span class="span2" style="font-size:32px;background-color:rgb(252, 183, 171);">ggg1
        </span>
        ggg1
    </div>


    <!-- test2:行塊盒與行塊盒 -->
    <!-- 行塊盒右邊的空白摺疊為一個，由父元素的font-size控制大小 -->
    <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
        <span class="span1" style="display:inline-block;font-size:32px;background-color:rgb(252, 240, 171);">ggg2
        </span><span class="span2" style="display:inline-block;font-size:64px;background-color:rgb(252, 183, 171);">ggg2
        </span>
        <span class="span3" style="display:inline-block;font-size:32px;background-color:rgb(247, 87, 161);">ggg2
        </span>

    </div>


    <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
        <span class="span1" style="display:inline-block;font-size:32px;background-color:rgb(252, 240, 171);">ggg2
        </span><span class="span2" style="display:inline-block;font-size:64px;background-color:rgb(252, 183, 171);">ggg2
        </span>
        <span class="span3" style="display:inline-block;font-size:32px;background-color:rgb(247, 87, 161);">ggg2
        </span>ggg2 ggg2

    </div>


    <!--test3:  行盒與行盒 (特別) -->
    <!-- 行盒子後面擺放"行盒"(有文本就有)，前一個行盒子出現右拉伸 -->
    <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
        <span class="span1" style="font-size:32px;background-color:rgb(252, 240, 171);">ggg3
        </span>

        <span class="span2" style="font-size:64px;background-color:rgb(252, 183, 171);">ggg3
        </span> ggg3 ggg3

    </div>

    <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
        <span class="span1" style="font-size:32px;background-color:rgb(252, 215, 8);">ggg3
        </span>


        <span class="span2" style="font-size:0px;background-color:rgb(255, 1, 1);">ggg3
        </span>

    </div>


  <!-- test4: 行盒子後面擺放"行塊盒"，前一個行盒子出現右拉伸 -->
    <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
        <span class="span1" style="font-size:32px;background-color:rgb(194, 252, 171);">ggg4
        </span>

        <span class="span2"
            style="display:inline-block;font-size:64px;background-color:rgb(52, 247, 3);">
        </span>

    </div>


 <!-- test5: span2後面無行盒子或者行塊盒子，無右拉伸 -->
    <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
        <span class="span1" style="font-size:32px;background-color:rgb(194, 252, 171);">ggg5
        </span>

        <span class="span2" style="font-size:64px;background-color:rgb(252, 203, 171);">ggg5
        </span>
       
    </div>

 
 <!-- test6: 行盒左右兩邊一個行塊盒 -->
    <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
        <span class="span2"
            style="display:inline-block;height:60px;width:100px;font-size:64px;background-color:rgb(252, 171, 171);">
        </span><span class="span1" style="font-size:32px;background-color:rgb(194, 252, 171);">ggg6
        </span>

        <span class="span2"
            style="display:inline-block;height:60px;width:100px;font-size:64px;background-color:rgb(252, 203, 171);">
        </span>

    </div>


<!-- test7: 去掉ggg77效果一樣，說明父元素有參考線 -->
    <div class="div-span" style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
        <span class="span2"
            style="display:inline-block;height:40px;width:100px;font-size:64px;background-color:rgb(252, 171, 171);">
        </span>
       
        <span class="span2"
            style="display:inline-block;height:60px;width:120px;background-color:rgb(197, 83, 7);">
        </span>
        ggg77

    </div>

總結

1. 文字的大小由: font-size,font-family,line-height決定
   設置文字的相對大小時候px,em,百分比，文字的內容實際高度content-area通常高於設置的值（不同的font-family比例不同，同一種文字比例相同，按比例計算），而且還有字體設計者設置的預設行高（行高>=0）
2. 圖片(可替換元素)和無子元素的inline-block元素的行為類似，都是下外邊距作為參考線

3. 一個元素內部有行盒（或者行塊盒），且font-size>0時，該元素會產生參考線

4. 行盒子右邊有行盒子（有文本的）或者行塊盒（任意的，甚至寬高0，無子元素）會導致該元素右伸展
5. 行塊盒與行盒或者行塊盒之間 ，如果之間有空隙發生空白摺疊（代碼書寫的多個換行或者空格合併為一個），空白大小由該元素包含塊的font-size大小決定

6. vertical-align 可以設置行盒或者行塊盒