翻譯練習

原部落格地址：Removing White Space Below Image Elements, or Why Inline Elements Have Descenders

HTML中Image元素下面展示的空白行經常造成困惑，但是這裡有一個合乎邏輯的解釋：Image是行內元素，行內元素都有底線。

如果你曾經試著把一個<img>標籤包裹在一個設定了邊框或者背景色的容器裡，你就會碰到臭名昭著的“什麼鬼？？？！！！為什麼我的影象下面有內邊距？”的問題。如果你盡職盡責地去查詢“刪除影象下面的空白行”，你大概會找到解決方案（或者這篇文章，提供瞭解決方案）：使用CSS把img設定為塊級元素，然後影象下面這個煩人的空白行就神奇地消失了。可能看起來像這樣：

img{
	display: block;
}

底線的問題

現在你清楚瞭解決方案，讓我解釋一下為什麼會這樣。瞭解原因會幫助你記住解決方案，也會讓你理解這不是一個bug，而是一個歷史遺留的問題。

讓我們繞道看看字型排版的世界：

當你看著我在這裡寫的文字時，你會注意到小寫字母分成三組：a, c, e, m, n, o, r, s, u, v, w, x, z, æ, and ø，這些高度一致，都包含在基線和肩線之間（見上圖）。其他的字母要麼有頂線（b, d, f, h, k, l, t），要麼有底線（g, j, p, q, y）。頂線是字母肩線突出向上的部分，底線是字母基線以下的部分。

這些跟影象有什麼關係呢？簡單：在HTML中<img>

所以，總結一下：影象是假定為有底線的行內元素。當你想讓它表現的像塊級元素，那就把它定義為塊級元素，然後底線就神奇的消失了。

完結。