今天看到【行內格式化】，有兩個概念，我一時之間沒有完全理解，就是標題的行內框和行框。
后來查看了諸多博客，慢慢縷清楚了，之前是我想的太復雜了......現在記錄一下我的理解。
內容區
每個元素都會生成一個或多個矩形框，這稱為元素框。各元素框中心有一個內容區，這個內容區周圍有可選的內邊距、邊框和外邊距。
而對於行內非替換元素或匿名文本某一部分，font-size值確定了內容區的高度。如果一個行內元素font-size為15px，則內容區的高度為15像素。內容區就是一個框，而每一個文字都有它的em框（em框確定內容區高度）。
基線
沿着文本最底部的一行線，若一行文本有中文和英文，則基線會在英文‘x’最底部。
行高
line-height屬性是指文本行基線之間的距離，而不是字體的大小，它確定了將各個元素框的高度增加或減少多少。
如果一個行內非替換元素的font-size為15px，line-height為21px，則相差6像素，這個數值是行間距。用戶代理將這個數值一分為二，將其一半分別放到內容區的頂部和底部，得到的便是行內框。
行內框
行內框是一個虛擬的矩形框，無法在頁面中顯示出來。
行框
一行文本中會有不同大小的文字，這就造成了一行文本中有不同高度的行內框，見上圖。而行框就是一行文本中最高行內框的頂端到最低行內框低端之間的距離，並且各行框的頂端挨着上一行行框的底端。
高度關系：
1、行高=行內框高度=內容區+行間距
2、行內框高度決定了行框高度
圖片和文本同時存在的情況
又是在看書的過程中，發現line-height的改變對於內容區的元素的位置有很大的影響，而vertical-align的值也能改變其位置。
先來看一個例子：
<span class="box"> <img src="http://b389.photo.store.qq.com/psb?/V14CdLA11YbtVu/jSw*CWExyChI3vbCduxfmnH22IqxjB*iIF1JGz80A24!/b/dIUBAAAAAAAA&bo=OgE2AToBNgERCT4!&rf=viewer_4"/> <span>我浮起來了沒？</span> </span>
.box { background-color: #000; color: #fff; display: inline-block; } img { width: 100px; }
效果是上圖的樣子，為什么圖片的底部會有空隙呢？那就和vertical-align屬性有關了。
vertical-align屬性各個關鍵字值的效果如下：
| <length> 數值 | 通過距離升高（正值）或降低（負值）元素的位置 |
| <percentage> 百分比值（%） | 相對於line-height值，使元素位置升高（正值）或降低（負值），0%與baseline關鍵字效果相同 |
| baseline | 默認值。元素的基線與父元素基線對齊 |
| sub | 會使元素變成下標，意味着其基線相對於其父元素的基線降低 |
| super | 會使元素變成上標，意味着其基線相對於其父元素的基線升高 |
| top | 將元素行內框的頂端與行框的頂端對齊 |
| text-top | 將元素行內框的頂端與父元素文本區域的頂端對齊 |
| middle | 把行內元素框的中點與父元素基線上方0.5ex(也就是根據父元素定義的字母x的高度的一半)對齊 |
| bottom | 將元素行內框的底端與行框的底端對齊 |
| text-bottom | 將元素行內框的底端與父元素文本區域的底端對齊 |
| inherit | 繼承父元素的相應屬性值 |
可以看到vertical-align的默認值是baseline，相對父元素的基線對齊，再次放出基線圖。
因此圖片下方的空隙就是基線至行框底線的距離啦。
那么，怎么讓圖片下方的空隙消失呢？
· 方法一：
直接設置圖片的vertical-align的值為bottom，與行框底端對齊
img { width: 100px; vertical-align: bottom; }
但是用到bottom，也就嘗試一哈text-bottom
img { width: 100px; vertical-align: text-bottom; }
發現，誒？一樣的效果！
但是這倆的區別在哪呢？讓我們設置一些line-height的值，就能看出區別了，給父元素設置一個line-height
.box { background-color: #000; color: #fff; display: inline-block; line-height: 10px; }
img { width: 80px; vertical-align: bottom; }
這個line-height比“我浮起來了沒？”的文字高度要小，因此，行內框實際上小於內容區，即浮於文本底線的上方。類似於下圖中間的效果。
於是此時圖片上移到與行內框對齊。
而如果圖片的vertical-align為text-bottom時，因為text-bottom對齊的是父元素的文本底線，所以還是在原來的位子不變。
（以上bottom與text-bottom的區別來自張鑫旭的博客，加上自己的理解）
· 方法二：
因為vertical-align只對inline元素和替換元素有效，將img設置為block，也可以去掉下面的空隙。
.box { background-color: #000; color: #fff; display: block; } img { width: 80px; display: block; }
· 方法三：
將vertical-align設置為top/middle也是可行的，只不過文字不在底部了。
· 方法四：
line-height設置成足夠小，近似於方法一中的，行內框小於內容區了，那么圖片的底部也就只能貼着內容區的底部存放了。
· 方法五：
line-height為相對單位，font-size間接控制
如果line-height是相對單位，例如line-height:1.6或者line-height:160%之類，也可以使用font-size間接控制，比方說來個狠的，font-size設為大雞蛋0, 本質上還是改變line-height值。
.box { background-color: #000; color: #fff; display: inline-block; width: 100px; font-size: 0; }
以上調整圖片位置的思想均來自觀摩張鑫旭博客內容的理解而來：
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
https://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
https://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/