inline、block與inline-block比較

參考文章：標籤的結構區塊與行內、display:inline-block的深入理解

先來說inline跟block，在原本html標籤，標籤本身可分為行內元素（inline）與區塊元素（block）。以下是行內元素跟區塊元素簡單的比較

區塊元素：

1. h1~h6、p、ol、li….等等在輸入時，會佔用一整行的標籤，都屬於區塊元素。
2. 可設定width、height、padding、margin等盒狀模型可描述的屬性

行內元素：

1. span、em、strong、img 等等在輸入時，會跟旁邊的內文並排者，都屬於行內元素
2. 設定盒狀模型屬性會無效，除非使用display轉換成block才可使用

參考文章內提到區塊元素內可包含多個區塊與行內元素，但行內元素內不可包含區塊元素。這點我比較不清楚，但在實作上我曾經使用<a>包住<div>，是可用的。會這樣包是因為有排版上的考量，但通常這樣包的時候，a也會轉換成block。

再來說inline-block，這個是css屬性中display的參數。意思是排版使用inline的方式，但是維持block的特性。排版使用inline代表可以左右排排站。這樣就可以不用使用float來做。firefox 4以上、google瀏覽器有支援此屬性，但IE不支援。

我原本以為IE7以下支援，後來才知道是因為我設定了別的屬性（例如height）觸發了IE的haslayout。然後IE7以下會把inline-block辨識為inline。（阿既然這樣就設inline就好咩….在IE底下神奇的是設定inline的話，還是可以對該元素設定寬高喔。所以「感覺」就像inline-block設定有生效）。IE8以上就有支援這個屬性了。