在前端開發中，似乎控制不同大小文字之間，或者文字與圖示之間對齊總是不那麼得心應手，總覺得少了點什麼，這其中其實跟CSS中幾種跟內聯元素相關的屬性有很大的關係，從我的感覺看，平時遇到的30%的css問題都是由於搞不清這幾種屬性的關係有關。這裡第一篇文章先介紹字型，掌握相關概念。
技術是以目的為導向的，那麼先來丟擲一個問題，前端開發中我們使用font-size來設定文字的大小，但檢查元素後發現內聯元素的高好像大多數時間並不是我們設定的font-size大小，這是為什麼哪？
這裡面涉及到瀏覽器的影響，字型的設計等方面的知識。尤其是字型設計是一門高深的學問，而我們只是為了開發網頁中控制文字大小和對齊，所以這裡我們只取我們需要的部分，下面先介紹字型概念。
字型相關概念
我們先來了解文字的各個概念。圖看起來更直觀，所以我簡單畫了個圖。
基線
對照著圖，可以看出基線是位於字母x下方的那條線，所有字元都基於這條線進行定位。這應該大家比較常見，畢竟vertical-align的預設值就是baseline，指的就是這條線。
em-box
em-box可能比較少見，但大家一定知道單位em。1em跟該元素的font-size大小相同。還是以圖為例如果設定font-size: 20px，那麼em-box的高度就為20px。
content-area
這是一個很重要的概念，content-area翻譯成中文是內容區域，這裡圖中沒有標出，因為通常預設情況下，content-area與line-height是一樣高的。給一個內聯元素設定背景，這背景所佔的區域就可以看成內容區域。
大多數情況下content-area於em-box的高度不同，conent-area的高度受到font-family和font-size的影響，有時候即使font-size一致可能以為字型不同導致content-area也不一樣，這是在字型設計的時候就決定了的。而em-box只受font-size影響。這也就解釋了為什麼我們有時候檢查元素看到的高度與實際字型設定大小不一樣的問題。
半行距
先看行距怎麼算，行距 = line-height - font-size。半行距就是將行距一分為二，一份加在em-box的上面，一份加在下面，就構成了完整的文字高度。
x-height
x-height顧名思義就是x字元高度的意思，1ex就是x-height的值，通常沒什麼作用，但是對於我們理解概念有很大幫助，css中vertical-align: middle的解釋就是Aligns the middle of the element with the baseline plus half the x-height of the parent，意思就是將該元素的中心點與父元素基線加上x-height高度的一半對齊。
這句話裡有幾個關鍵的部分一定要弄明白該元素的中心點、父元素的基線和基線加上x-height高度的一半，我們常常使用veritcal-align: middle出錯，往往就是這幾個點沒有搞清楚，這裡先試著理解，以後的文章會詳細說明。
以下部分是介紹字型單位和一些理解，如果已經瞭解可以直接跳過，別浪費時間，時間寶貴~
度量單位
字型的大小在css中用font-size來表示，它的度量單位有很多，主要分為三大類：關鍵詞型別、數值型別、百分比型別。
關鍵詞型別
關鍵詞型別分為絕對尺寸和相對尺寸。由於使用的較少，不必記憶，所以這裡僅僅羅列出來。
絕對尺寸：xx-small、x-small、small、medium、large、x-large、xx-large。
相對型別：smaller、larger。
數值型別
數值型別在平時使用較多，而數值型別的單位常用的有px、em和rem，可能偶爾會用到ex其他基本用不到，不再列舉。px表示畫素，em是相對於父元素的字型進行計算，而rem則是相對於根元素<html>的字型大小進行計算。
其他應用
神奇的font-size: 0
font-size: 0這種寫法很常用，在以前的Chrome中會限制font-size小於12px並且大於0的時候按照12px計算，但我最近在最新版的Version 65.0.3325.181 (Official Build) (64-bit)Chorme下測試，發現已經沒有這個限制了（不知道什麼時候修改掉的-_-）。使用font-size: 0讓字型大小變為0，通常也會使得line-hight變為0，這經常可以解決line-block元素出現的空隙問題，這個問題具體的原因我們後面再說。
看了很多文章最後總結和整理了這些，下一篇介紹line-height說說line-height在內聯元素中的作用。在這篇文章中如有錯誤或我與大家理解不一致的地方，歡迎指出，感謝~原文連結。