參考部落格
內聯元素（html規範中的概念）英文：inline element，其中文叫法有多種，如：內聯元素、內嵌元素、行內元素、直進式元素等。基本上沒有統一的翻譯。另外提到內聯元素，通常會涉及到的屬性是display:inline；這個屬性能夠修復著名的ie雙倍浮動邊界問題。常見的內聯元素：
1、內聯元素(inline)不會獨佔一行，相鄰的內聯元素會排在同一行。其寬度隨內容的變化而變化。2、內聯元素不可以設定寬高
3、內聯元素可以設定margin，但只在水平方向有效。
4、內聯元素可以設定padding，水平方向有效，垂直方向上的padding其實是存在的，但是不佔行內的高度。舉個例子：
>
#box2
#box2 span
#box2 div
style
>
"box2"
>
>
hhhgaajjspan
>
>
testdiv
>
div>
我們一般說內聯元素是指display屬性值為inline的元素，即，非置換元素（non-replaced element），這些元素滿足上面的三條性質，這部分常見的元素包括：
還有一些特殊的內聯元素，主要包括三種：1、可置換元素（replaced element），如 img / input / select /textarea / button / label / svg 等，這些元素對應的就是非置換元素，不同之處在於可置換元素不用設定display屬性，元素本身具有inline-block的性質。這些元素和非置換inline元素的區別在於:2、所有 display 值以 inline-開頭的元素，如 inline-table / inline-flex 。
3、處於某種特殊格式化上下文的內聯元素，例如 flexbox。元素中的子元素都處於flex formatting context（彈性格式化上下文）中，這些子元素的 display 值都是「blockified」。
元素的line-height不設定時，預設值為normal，取決於元素的font-size。元素的height不設定時，預設值為auto，等於line-height。
對於乙個內聯元素，它有兩個高度：content-area（內容區高度）和vitual-area（實際高度），實際高度就是line-height，這個高度用於計算 line-box 的高度，line-height 並非表示兩個 baseline 之間的距離。所以當設定line-height等於盒子的height時，content-area高度如果小於height，leading一定是一半在頂部一半在底部，這樣就實現了居中。virtual-area 和 content-area 高度的差異叫做 leading。leading 的一半會被加到 content-area 頂部，另一半會被加到底部。因此 content-area 總是處於 virtual-area 的中間。
line-box 計算的一些細節：
另外補充一點：line-height屬性是可以被子元素預設繼承的。比如說：
>
#box3
#box3 span
#box3 div
"box3"
>
>
box3span
>
>
testdiv
>
div>
vertical-align用於設定行內元素的垂直對齊方式。不設定時預設值為baseline，基於基線對齊。常用的有五個引數：對於下圖中的img底部空隙問題 ，設定img的vertical-align屬性為上面五個值都可以解決。
CSS 塊元素 內聯元素 內聯塊元素
元素就是標籤，布局中常用的有三種標籤，塊元素 內聯元素 內聯塊元素，了解這三種元素的特性，才能熟練的進行頁面布局。塊元素，也可以稱為行元素，布局中常用的標籤如 div p ul li h1 h6 dl dt dd等等都是塊元素，它在布局中的行為 下面採用div來進行演示一下 那麼下面有乙個想法，就是...
CSS 塊元素 內聯元素 內聯塊元素
元素就是標籤，不居中常用的三種標籤，塊元素，內聯元素，內斂塊元素，了解這三種元素的特性，才能熟練進行頁面布局。地元素，也可以成為行元素，不居中常用的標籤如 都是塊元素，他們在布局中的行為 內聯元素，也可以成為內元素，不居中常用的標籤如 等等都是內聯元素，他們在布局中的行為 解決內聯元素間隙的方法 去...
css 塊元素 內聯元素 內聯塊元素
元素就是標籤，布局中常用的有三種標籤，塊元素 內聯元素 內聯塊元素，了解這三種元素的特性，才能熟練的進行頁面布局。塊元素 塊元素，也可以稱為行元素，布局中常用的標籤，如 div p ul li h1 h6 等等都是塊元素，它在布局中的行為 1 支援全部的樣式 2 如果沒有設定寬度，預設的寬度為父級寬...