inline、block、inline-block的區別

咱們用firbug瀏覽別人網站時會發現設計者會在不少地方使用inline-block。咱們都知道inline是聲明div是內聯對象，block是聲明塊對象，那麼inline-block是什麼意思，即內聯又成塊？接下來作個測試，讓咱們瞭解一下三者的區別和做用吧：

< 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的寬高是對其沒影響的。看下圖：