inline、block、inline-block的區別_CSS

我們用firbug瀏覽別人網站時會發現設計者會在很多地方使用inline-block。我們都知道inline是聲明div是內聯對象，block是聲明塊對象，那麼inline-block是什麼意思，即內聯又成塊。接下來做個測試，讓我們瞭解一下三者的區別和作用吧： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >inline、block、inline-block的區別</ title > < style > .a{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;} .b{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;} .c{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;} </ style > </ head > < body > < span class = "a" > inline </ span >inline < span class = "b" > block </ span >block < span class = "c" > inline-block </ span >inline-block </ body > </ html >

我們發現內聯對象inline給它設定height和width是沒有用的，致使它變寬變大的原因是內部元素的寬高+padding。觀察inline對象的前後元素我們會發現Inline不單獨佔一行，其它元素會緊跟其後。

塊對象block是可以設定寬高的，但是它的實際寬高是本身寬高+padding。觀察block的前後元素我們會發現block要單獨佔一行。

當看到這裡的時候我們就會想，如果我們即需要div有寬高，又不希望它獨佔一行怎麼辦。

這個時候我們就需要使用inline-block了，再觀察一下上圖，我們會發現inline-block即具有block的寬高特性又具有inline的同行元素特性。

 

最後提醒一下，IE6/7下padding對inline的寬高是對其沒影響的。看下圖：

2年前