※ 連續影像之間為什麼有距離？

※ 先了解 line-height 行高

  <p class="p1"> tsuiling 測試 line-height: normal (預設) </p>
  <p class="p2"> tsuiling 測試 line-height: normal (預設) </p>
  <p class="p3"> tsuiling 測試 line-height: normal (預設) </p>

  p { background-color: lightskyblue;  }
  .p1 { line-height: normal; }
  .p2 { line-height: 1; }
  .p3 { line-height: 1em; }

tsuiling 測試 line-height: normal (預設)

tsuiling 測試 line-height: 1 (設定1倍)

tsuiling 測試 line-height: 1em (設定1個字體高)

※ 同時有圖文時 line-height 行高在哪裡？

  <div class="b1">
    <span>ABC</span> <img src="../img/images/flower/f1.jpg" alt="">
  </div>

  .b1 { background-color: lightskyblue; text-align: center;  }
  .b1 span { background-color: greenyellow; }

ABC

※ 測試增加 line-height 行高的結果？

  <div class="b2">
    <span>ABC</span> <img src="../img/images/flower/f1.jpg" alt="">
  </div>

  .b2 { background-color: lightskyblue; text-align: center; line-height: 100px; }
  .b2 span { background-color: greenyellow; }

ABC

※ 設定圖文彼此之的垂直對齊！(垂直置中)

  <div class="b3">
    <span>ABC</span> <img src="../img/images/flower/f1.jpg" alt="">
  </div>

  .b3 { background-color: lightskyblue; text-align: center; }
  .b3 span { background-color: greenyellow; }
  .b3 img { vertical-align: middle; }

ABC

※ 設定圖文彼此之的垂直對齊！(垂直靠下) 本來是 baseline 文字基底線對齊

  <div class="b4">
    <span>ABC</span> <img src="../img/images/flower/f1.jpg" alt="">
  </div>

  .b4 { background-color: lightskyblue; text-align: center; }
  .b4 span { background-color: greenyellow; }
  .b4 img { vertical-align: bottom; }

ABC

※ 解決連續影像之間的距離！

  .b5 { background-color: lightskyblue; }
  .b5 img { vertical-align: middle; }