摘要：看上面的例子我們也能看出來，實際上一個內聯元素是有兩個高度的高度實際渲染的那個高度和高度實際區域占空間的高度也就是。

前言

總括： 本文通過實例講解CSS中最大的難點之一，行內元素的布局，主要是挖掘line-height和vertical-align兩個屬性在布局方面的使用。

原文博客地址：深入理解行內元素的布局

知乎專欄&&簡書專題：前端進擊者（知乎）&&前端進擊者（簡書）

博主博客地址：Damonare的個人博客

白茶清歡無別事，我在等風，也在等你。?

正文

講道理line-height和vertical-align 這對基是十分低調的，日常開發中碰到的很多莫名其妙的bug很大一部分都是這倆貨搞出來了的，但很少有人知道這對基的罪惡，因為可能花式改寫一下CSS代碼問題就解決了。實際上搞明白這倆東西才能讓我們在布局工作中游刃有余。本文接下來就通過這對基的關系來了解內聯元素具體的布局問題~we are刨根問底攔不住~?

? 讀這篇文章之前請確定您有以下知識基礎:

line-height的數字值是和font-size大小相關的；

vertical-align的百分比值是和line-height值相關的；

引出vertical-align

首先來看一個?：

  Xx

.test {
      background: red;
}
img {
    width: 50px;
    height: 50px;
}
span {
    background: white;
}

下面無實例內容的話戳這里

如上可證明，inline元素的高度決定者是line-height，并不是文字內容撐開的。??

CSS規范里對line-height的默認值有這么一句話：

We recommend a used value for "normal" between 1.0 to 1.2.

只是推薦...?是不是說實際上各個瀏覽器對于line-height的默認值實現不一定是一樣的，但都介于1.0-1.2之間。具體各大瀏覽器的實現值待查證。這里需要記住line-height的默認值是啥就OK。

IFC

在之前的博文CSS的盒子模型里面，有拓展過相關知識，簡短的介紹了下BFC和IFC，相較于BFC，IFC要復雜得多，規范里IFC的篇幅也要比BFC多得多。

簡要總結下BFC，即塊級元素可能會觸發塊級格式上下文(BFC)，在塊級格式上下文中，塊級盒子豎直方向排列，不受上下文外部元素影響，自成一方世界。塊容器盒指的是那些包含元素的盒子，塊容器盒可能包含其它塊級盒，也可能生成一個行內格式上下文(IFC)。?

但塊容器盒要么只包含行內盒，要么只包含塊級盒。但通常會同時包含兩者。在這種情況下，將創建匿名塊盒來包含毗鄰的行內級盒。

看個?：

//demo1

  Some inline text 
  
followed by a paragraph
 
  followed by more inline text.

// demo2

  Some inline text 
  followed by a paragraph 
  followed by more inline text.

如上，demo1將創建兩個匿名塊盒，一個包含 p前面的文本 (Some inline text)， 一個包含 p 后面的文本(followed by more inline text)。

demo2將生成一個行內格式上下文，生成一個匿名行盒(line box)，里面包含兩個匿名行內盒(inline box)，Some inline text 和followed by more inline text.和一個span行內盒。

OK，至于怎么觸發塊級格式上下文請看塊格式化上下文。這里只為了說明IFC而介紹下BFC。

當元素的 CSS 屬性 display 的計算值為 inline, inline-block 或 inline-table 時，稱它為行內級元素。
行內級元素生成行內級盒(inline-level boxes)，參與行內格式化上下文(inline formatting context)。同時參與生成行內格式化上下文的行內級盒稱為行內盒(Inline boxes)。

規范里IFC文字很多，提煉下我們需要的：

如果一個矩形區域，包含著一些排成一條線的盒子，稱為line box。
一個line box的寬度，由他的包含塊(containg block)和floats的存在情況決定。line box的高度，由你給出的代碼決定。(line-height)，即所有inline box的最大高度差。
當盒子的高度小于父級盒子高度時，垂直方向的對齊"vertical-align"屬性決定。

Vertical-align(2)

在上面的vertical-align(1)中主要了解了什么是baseline，以及它是如何確定的。我們繼續研究這個屬性，看下面說明表格：

值	描述
baseline	默認。元素放置在父元素的基線上。
top	把元素的頂端與行中最高元素的頂端對齊
text-top	把元素的頂端與父元素字體的頂端對齊
middle	把此元素放置在父元素的中部。
bottom	把元素的頂端與行中最低的元素的頂端對齊。
text-bottom	把元素的底端與父元素字體的底端對齊。

除了baseline我們已經很了解之外，其它幾個屬性我們貌似也能看懂，唯一的問題可能是父元素的頂端低端都是什么鬼？?需要確定一下，好的再次拿我們第一個例子來講解，但我們需要變一下，加點東西進去：

  
    Xx
  

.demo {
  background: red;
}
.line-box {
  background: blue;
  line-height: 200px;
}
.line-box img {
  vertical-align: text-bottom;
  width: 50px;
}
.line-box span {
  margin-left: 20px;
  color: yellow;
}

實例

上面例子中，我們更改了Xx的對齊方式，發現了很奇特的現象?，當Xx設置為text-bottom或是text-top的時候父元素(ling box)被撐大了?，但這另一方面這也證明了，父元素的基線和中線等并不是由文本Xx決定的，誰決定的呢？前面提過的那個空白節點決定的！?這個空白節點實際上是理解內聯元素布局的重點！不知道它的存在，很多問題是搞不清楚的。那么這個空白節點又到底是怎么影響布局的呢？前面說過基線的決定著是小寫字母x，這個時候問題就來了，可能你早就想問了，不同字體下面的小寫字母x底部邊緣肯定是有區別的啊，好，我們在研究下font-family。

Font-family

我們再來看一個?:

下面沒示例內容請戳這