CSS line-height 與 font-size 關係：為什麼 div 高度顯示 51px 而非 50px

現象代碼

<div>
  <span class="span3">line-height</span>
</div>

.span3 { font-size: 1.2em; border: 5px solid #ccc; padding: 5px; margin: 5px; }
div { line-height: 50px; background-color: #efa; }

開發者工具顯示 div 高度 51px，而非預期 50px。

根本原因：內聯元素行盒模型

1. div 設置 line-height: 50px → 確立行框高度為 50px。
2. span 為內聯元素，其 font-size: 1.2em (約 19.2px 假設基礎 16px) 小於行高。
3. 內聯元素默認 vertical-align: baseline：基線對齊。字體有下行區，導致行框實際高度 = line-height + 下行區溢出。
4. span 有 border、padding、margin：雖然內聯元素的上下 padding/border/margin 不影響行框高度，但 背景/邊框繪製區域 會超出行框，開發者工具測量的是視覺渲染盒，包含邊框外緣。

關鍵點：內聯元素盒模型特殊性

• 上下 padding/border/margin：可見，但不佔據行框空間，不撐開父容器高度。
• line-height 決定行框最小高度。
• vertical-align 影響內聯元素在行框中的垂直位置。

解決方案：使 span 成為塊級或行內塊級

.span3 {
    display: inline-block; /* 或 block */
    line-height: 1.2; /* 重置行高，避免繼承父級 50px */
    /* 其他樣式... */
}

• display: inline-block：元素生成塊級盒，參與行框計算時作為整體，高度由內容 + padding + border 決定，不再受父級 line-height 奇怪影響。
• display: block：獨佔一行，高度同理可控。

驗證實驗

div { line-height: 50px; font-size: 0; } /* 消除基線影響 */
.span3 { font-size: 16px; display: inline-block; vertical-align: middle; }

設置父級 font-size: 0 可消除內聯元素間隙與基線偏移，配合 inline-block + vertical-align: middle 實現完美垂直居中。

總結

div 高度 51px 來源於 內聯元素 baseline 對齊導致的下行區溢出 + 邊框視覺渲染超出行框。理解 CSS 內聯格式化上下文 (IFC) 中 line-height、vertical-align、font-size 的交互關係，是精準控制排版的關鍵。需精確高度時，將內聯元素轉為 inline-block/block。