內聯元素與流

塊級元素負責結構，內聯元素接管內容

• 字母 x——CSS 世界中隱匿的舉足輕重的角色

• 內聯元素的基石 line-height

  • 為什麼 line-height 可以讓內聯元素“垂直居中”

      誤區1：讓單行文字垂直居中，只需要line-height
      一個屬性就可以，與 height一點兒關係都沒有。
      誤區2：行高控制文字垂直居中，不僅適用於單行，多
      行也是可以的。準確的說法應該是 “line-height
      可以讓單行或多行元素近似垂直居中”。
    複製程式碼

  • vertical-align 和 line-height 之間的關係

      .box { line-height: 32px; }
      .box > span { font-size: 24px; }
      <div class="box">
      <span>文字</span> </div>
      非常直觀地說明了為何最後容器的高度會是
      36px，而非 line-height 設定的 32px。
    複製程式碼

    • 清除“幽靈空白節點”

        1. 圖片塊狀化。
        2. 容器 line-height足夠小。只要半行間距小到字母
        x 的下邊緣位置或者再往上，然就沒有了撐開底部間
        隙高度空間了。比方說，容器設定 line-height:0。
        3. 容器 font-size
        足夠小。此方法要想生效，需要容器的 line-height
        屬性值和當 前 font-size 相關，如
        line-height:1.5 或者
        line-height:150%之類;否則只會讓下
        面的間隙變得更大，因為基線位置因字元 x
        變小而往上升了。
        4. 圖片設定其他 vertical-
        屬性值。間隙的產生原因之一就
        是基線對齊，所以我們設定 vertical-align 的值為
        top、middle、bottom 中的任意一個都是可以的。
    複製程式碼