如何刪除Image元素下面的空白行及爲何行內元素有底線

翻譯練習

原博客地址：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>標籤是一個行內元素。這意味着它被當成文本處理。當文本被放置在頁面中時就爲底線留出了空間。換句話說，你在看到的圖像下面的空白行就是瀏覽器假設在文本中在圖片以前或以後應給有一個底線，從而給它留出空間。這個空白行問題出現的緣由是由於圖像最初被引入的時候是被認定爲行內元素的，今天咱們主要把它當成塊級元素來使用。正如我早先所說，這都是因爲歷史遺留的問題。

因此，總結一下：圖像是假定爲有底線的行內元素。當你想讓它表現的像塊級元素，那就把它定義爲塊級元素，而後底線就神奇的消失了。

完結。