block，inline及inline-block的簡單介紹
總體概念
block和inline這兩個概念是簡略的說法，完整確切的說應該是 block-level elements （塊級元素） 和 inline elements （內聯元素）。block元素通常被現實為獨立的一塊，會單獨換一行；inline元素則前後不會產生換行，一系列inline元素都在一行內顯示，直到該行排滿。
大體來說HTML元素各有其自身的佈局級別（block元素還是inline元素）：
常見的塊級元素有 DIV， FORM， TABLE， P， PRE， H1~H6， DL， OL， UL 等。
常見的內聯元素有 SPAN， A， STRONG， EM， LABEL， INPUT， SELECT， TEXTAREA， IMG， BR 等
另外：
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是這個是個大概的說法，每個特定的元素能包含的元素也是特定的，所以具體到個別元素上，這條規律是不適用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般來說，可以透過display：inline和display：block的設定，改變元素的佈局級別。
block，inline和inlinke-block細節對比
display：block
block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。
block元素可以設定width，height屬性。塊級元素即使設定了寬度，仍然是獨佔一行。
block元素可以設定margin和padding屬性。
display：inline
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
inline元素設定width，height屬性無效。
inline元素的margin和padding屬性，水平方向的padding-left， padding-right， margin-left， margin-right都產生邊距效果；但豎直方向的padding-top， padding-bottom， margin-top， margin-bottom不會產生邊距效果。
display：inline-block
簡單來說就是將物件呈現為inline物件，但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
例如：
inline-block將會使元素成為一個inline元素（如後跟內聯元素，將不會換行），但本身卻扔支援block元素的屬性。
B
此時div為block元素，span為inline元素，顯示順序為 A->換行->B。
對block元素使用inline-block屬性。
B
此時div為inline元素，但仍然支援margin的垂直屬性top，顯示順序為 A->同行->B（整體下降10px）。
對inline元素使用inline-block屬性。
B
C
此時div為block元素，B仍然為inline元素，但開始支援margin的垂直屬性top，C為inline元素。顯示順序為A->換行->B->同行->C（B，C整體下降10px）。
雖然 inline-block 有著 block 與 inline 結合的好處的，在某些佈局上可以貢獻些力量，但是同時它也存在一些問題。
水平間隙問題
我們建立一個導航列表，並將其列表 item 設定為 inline-block，主要程式碼如下：
。nav {
background： #999；
}
。nav-item{
display：inline-block； /* 設定為inline-block */
width： 100px；
background： #ddd；
}
效果圖如下：
我們從效果圖中可以看到列表 item 之間有一點小空隙，但是我們在程式碼中並沒有設定 margin 水平間距。那麼這個空隙是如何產生的呢？
這是因為我們編寫程式碼時輸入空格、換行都會產生空白符。而瀏覽器是不會忽略空白符的，且對於多個連續的空白符瀏覽器會自動將其合併成一個，故產生了所謂的間隙。
對於上面例項，我們在列表 item 元素之間輸入了回車換行以方便閱讀，而這間隙正是這個回車換行產生的空白符。
同樣對於所有的行內元素（inline，inline-block），換行都會產生空白符的間隙。
如何消除空白符
從上面我們瞭解到空白符，是瀏覽器正常的表現行為。但是對於某些場景來說，並不美觀，而且間隙大小非可控，所以我們往往需要去掉這個空白間隙。一般來說我們有兩種方法來去掉這個換行引起間隙：程式碼不換行和設定 font-size。
程式碼不換行
我們瞭解到，由於換行空格導致產生換行符，因此我們可以將上述例子中的列表 item 寫成一行，這樣空白符便消失，間隙就不復存在了。其程式碼如下：
。nav {
background： #999；
}
。nav-item{
display：inline-block； /* 設定為inline-block */
width： 100px；
background： #ddd；
}
但考慮到程式碼可讀及維護性，我們一般不建議連成一行的寫法。
設定 Font-Size
首先要理解空白符歸根結底是個字元，因此，我們可以透過設定 font-size 屬性來控制其產生的間隙的大小。我們知道如果將 font-size 設定為 0，文字字元是沒法顯示的，那麼同樣這個空白字也沒了，間隙也就沒了。
於是順著這個思路就有了另一個解決方案：透過設定父元素的 font-size 為 0 來去掉這個間隙，然後重置子元素的 font-size，讓其恢復子元素文字字元。
所以該方法程式碼如下：
。nav {
background： #999；
font-size： 0； /* 空白字元大小為0 */
}
。nav-item{
display：inline-block；
width： 100px；
font-size： 16px； /* 重置 font-size 為16px*/
background： #ddd；
}
使用該方法時需要特別注意其子元素一定要重置 font-size，不然很容易掉進坑裡（文字顯示不出來）。
垂直間隙問題
由於 inline-block 垂直對齊使用的是
vertical-align
屬性，而該屬性預設的對齊方式為
baseline
，而基線的位置為小寫英文字母
x
的下端沿。該線離底線（text-bottom）還是有點距離的。
下面以例項論證，如下：
效果圖如下：
按道理來說，div 的高度應該是圖片撐開的高度，所以不可能看到如圖所示的大概 3px （不同的字型大小，這個灰色間隙會不一樣）的背景色。所以為了解決這個問題，我們可以設定 img 的
vertical-align
的值為
middle
，
text-top
，
text-bottom
都可以（前提是父元素
line-height
計算的高度要小於圖片的高度）。
所以一般為了避免這個垂直的間隙，在設定 inline-block 的時候，還需要順手帶個
vertical-align： middle；
此時就沒有了間距
補充說明
一般我們會用display：block，display：inline或者display：inline-block來調整元素的佈局級別，其實display的引數遠遠不止這三種，僅僅是比較常用而已。