CSS中文字頂部對齊

在網頁中，經常會出現由多行文字組成的文本塊，這時我們常常希望這些文字的頂部能夠對齊。但是由于中英文字符的字形不同，實際上這并不是一件簡單的事情。

在 CSS 中，有一種屬性可以控制文字的行高，這就是 line-height 屬性。默認情況下，line-height 的值等于 font-size 的值。但是對于中英文混合的文本，如果采用默認的行高，那么中英文字符的頂部就會出現錯位，給人閱讀帶來不便。

例如下面的幾行文本：

這是中文文本。This is English text. 
中文和 English 混排。

在這幾行文本中，第一行和第三行是中文文本，第二行是英文文本。如果我們不指定行高，那么這幾行文本的頂部會出現不對齊的情況，如下圖所示：

為了解決這個問題，我們需要指定一個合適的行高，讓中英文字符的頂部對齊。通常情況下，合適的行高是在 1.4 到 1.6 之間。例如：

這是中文文本。This is English text. 
中文和 English 混排。p { 
font-size: 16px; 
line-height: 1.5; 
}

設置了合適的行高之后，中英文字符的頂部就會對齊，如下圖所示：

當然，如果你希望文字的行高能夠自適應文本內容，可以使用 CSS3 的 flex 布局或者 table 布局來實現。