本文為飢人谷講師方方原創文章，首發於 前端學習指南。 這是一篇譯文，對 inline 和 inline-block 的元素剖析非常給力。 原文：Deep dive CSS: font metrics, line-height and vertical-align - Vincent ...

　　 說在前面：通過這次深入學習CSS的line-height和vertical-align屬性，對CSS真是刮目相看，決心開始深入CSS學習哈哈。 一、從一個常見的需求開始 　　在一行中，左側圖標，圖標右側是文字，並且圖標和文字在這行垂直居中。 　　上代 ...

行高（line-height）🚩 line-height 屬性是指文本行基線之間的距離，用於設置多行元素的空間量，如多行文本的間距。對於塊級元素，它指定元素行盒（line boxes）的最小高度。 行高 line-height 實際上只影響行內元素和其他行內內容，而不會直接影響塊級元素 ...

vertical-align 屬性設置元素的垂直對齊方式； 想必大家都知道這個屬性，也知道怎么用。但是今天我要說的是其中值：middle（把此元素放置在父元素中部）存在的一個小小的bug...... 如果不仔細觀察，想必是不會發現的，但是作為一個嚴謹且擁有強烈強迫症的童鞋，簡直是無法容忍這種 ...

一、為什么要寫這篇文章 今天看到一個問題： 兩個div 都設置 display：inline-block，正常顯示；但是在第二個div中加一個塊級元素或者內聯元素，顯示就變了個樣，為什么？ 解決方案就是給第二個div加上：vertical-align:top ...

什么是行間距？ 古時候我們使用印刷機來出來文字。印刷出來的每個字，都位於獨立的一個塊中。 行間距，即傳說中控制兩行文字垂直距離的東東。在CSS中，line-height被用來控制行與行之間垂直距離。 不過，行間距與半行間距，還是取決於CSS中的line-height。那么，如何來 ...

. 首頁 博客園 聯系我 前言：關於vertical-align屬性. 實踐出真知. 垂直居中. 第二種用法. 留言評論 返回頂部 ...

vertical-align定義行內元素（inline和inline-block）的基線相對於該元素所在行的基線在垂直方向上的對齊方式，即與匿名文本大寫字母X底邊對齊，默認值baseline，當屬性值為數值或百分比時正負值均可。 屬性值介紹： baseline表示元素基線和父元素基線對齊 ...