CSS display:inline-block 效果

CSS display:inline-block 的效果可以讓許多區塊自動浮動起來水平排列，而且不需要額外設定 clear 也不會讓接著的元素浮上來蓋住區塊，這樣說起來有點抽像，在傳統的設計 DIV 區塊水平排列的時候，網頁設計師通常會採用 CSS 的 float 屬性，讓每個 DIV 區塊產生浮動的效果，這樣就可以讓許多區塊呈現水平排列，可是很容易造成這些區塊以外的區塊也浮動上來，所以網頁設計師會額外在區塊群的最後加上 clear 屬性，清除後面的浮動的效果，display:inline-block 的效果就是可以讓我們不用額外設定 clear 屬性，後面的區塊也不會蓋上來。

CSS display:inline-block 語法

display:inline-block;

用法與一般的 display 屬性值一樣，inline-block 僅是 display 屬性的其中一個參數。

CSS display:inline-block 實際範例一、先用傳統的設計方式

範例的結果

範例一是傳統的區塊浮動設定方式，單純的使用 float 屬性，在橘色的 TestDIV2 區塊內必須加上 clear 屬性，否則橘色的 TestDIV2 區塊會壓到上面的三個灰色框框 TestDIV1 區塊，接著我們來看看如何用 display:inline-block 創造出同樣的效果。

CSS display:inline-block 實際範例二

範例的結果

範例二中的灰色框框 TestDIV3 區塊裡使用了「display:inline-block;」的效果，這時候我們的橘色 TestDIV2 區塊不需要使用 clear 屬性就能創造出與範例一相同的效果，這就是「display:inline-block;」的特色。

CSS display:inline-block 的效果與 display:inline 有點類似，不過 display:inline-block 可以設定元素的寬度與高度，功能比較強大。

延伸閱讀