1、什麼是inline、block、inline-block元素？
如果隻用一句話描述:inline是内聯元素，block是塊級元素，inline-block是内聯塊元素。
inline元素全稱Inline Elements，英文原意:An inline element does not start on a new line and only takes up as much width as necessary.一個内聯元素不會開始新的一行，并且隻占有必要的寬度。
常見的塊元素有div、p、h1...h6、ol、ul、dl、table、address、blockquote、form。
block元素全稱Block-level Elements，英文原意:A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).一個塊級元素總是開始新的一行，并且占據可獲得的全部寬度(左右都會盡可能的延伸到它能延伸的最遠)
常見的塊元素有div、p、h1...h6、ol、ul、dl、table、address、blockquote 、form。
inline-block元素，英文釋義:inline-block elements are like inline elements but they can have a width and a height.它像内聯元素，但具有寬度和高度。
img、input标簽就是這種内聯塊元素标簽
2、各自具有什麼特點？
inline元素:
(1)、和其他元素都在一行上；
(2)、元素的高度、寬度、行高及頂部和底部邊距不可設定；
(3)、元素的寬度就是它包含的文字或圖檔的寬度，不可改變。
置;
block元素:
(1)、每個塊級元素都從新的一行開始，并且其後的元素也另起一行。（一個塊級元素獨占一行）;
(2)、元素的高度、寬度、行高以及頂和底邊距都可設定;
(3)、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一緻），除非設定一個寬度。
inline-block元素:
(1)、和其他元素都在一行上；
(2)、元素的高度、寬度、行高以及頂和底邊距都可設定
3、互相之間的差別
差別主要是三個方面:一是排列方式，二是寬高邊距設定，三是預設寬度。
(1)塊級元素會獨占一行，而内聯元素和内聯塊元素則會在一行内顯示。
(2)塊級元素和内聯塊元素可以設定 width、height 屬性，而内聯元素設定無效。
(3)塊級元素的 width 預設為 100%，而内聯元素則是根據其自身的内容或子元素來決定其寬度。
二.常見問題
插入img下面會有空白
三.解決方案
1、給圖檔img标簽display:block
2、定義圖檔img标簽vertical-align:bottom，vertical-align:middle，vertical-align:top。
3、定義容器裡的字型大小font-size為0。
img元素底部為何有空白？
由于基線的原因，圖檔下方到bottom會有一小段空白區域。
四.擴充思考
inline-block和float的差別
1、文檔流（Document flow）:浮動元素會脫離文檔流，并使得周圍元素環繞這個元素。而inline-block元素仍在文檔流内。是以設定inline-block不需要清除浮動。當然，周圍元素不會環繞這個元素，你也不可能通過清除inline-block就讓一個元素跑到下面去。
2、水準位置（Horizontal position）：很明顯你不能通過給父元素設定text-align:center讓浮動元素居中。事實上定位類屬性設定到父元素上，均不會影響父元素内浮動的元素。但是父元素内元素如果設定了display：inline-block，則對父元素設定一些定位屬性會影響到子元素。（這還是因為浮動元素脫離文檔流的關系）。
3、垂直對齊（Vertical alignment）：inline-block元素沿着預設的基線對齊。浮動元素緊貼頂部。你可以通過vertical屬性設定這個預設基線，但對浮動元素這種方法就不行了。這也是我傾向于inline-block的主要原因。
4、空白（Whitespace）：inline-block包含html空白節點。如果你的html中一系列元素每個元素之間都換行了，當你對這些元素設定inline-block時，這些元素之間就會出現空白。而浮動元素會忽略空白節點，互相緊貼.
作者：大大頭大
連結： https://www.jianshu.com/p/cca9f037a6b9
來源：簡書