先看這個例子
本例一行用 16px 等闊字、32px 行高，內有 32px 方塊，採底部對齊；方塊底部與行框底部相接。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 方塊 | 量度闊、高 | 32×32px |
| 底部空位 | 父層底部減方塊底部 | 在量度容差內約 0px |
| 基線對照 | 改回基線對齊 | 字形下伸位置會留正空位，須按引擎量度 |
瀏覽器怎樣處理
行內方塊參與行框配置，預設按基線對齊。字形上伸、下伸量度會影響底下空位。bottom 則用另一個對齊目標。基線空位的實際像素須逐引擎量度，不能寫成所有字款相同的常數。
預設基線對齊會留下受字款影響的空位
反例移除 vertical-align:bottom，方塊和行尺寸不變。
<style>body{margin:8px}</style>
<style>.line{font:16px/32px monospace;background:#e3efe8}.tile{display:inline-block;width:32px;height:32px;background:#23715d}</style><p class="line"><span class="tile"></span></p>量度後父層底部比方塊底部低。只改父層 margin，不會處理這個行內基線關係。
試着修正
應否聲稱所有引擎的基線空位都剛好 7px？
查看參考答案
不應。各引擎記錄真正正空位及字款量度，另核對底部對齊的零空位。
- 比較量度底部，不只看底色。
- 結果旁保留字款和行高條件。