display:inline; display:block;

block(塊級元素）：

div 、from、 p 、table、 pre、h1~h六、 dl 、ol 、ul等

inline(內聯元素）：

span、a、strong、em、label、input、select、textarea、img、br等

 

display:block

　　block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。

　　block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。

　　block元素能夠設置margin和padding屬性。

有width，height，仍然獨佔一行：

能夠設置margin,padding屬性：

 

display:inline

　　inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。

　　inline元素設置width,height屬性無效。

　　inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

width,height無效：

 

padding有效，margin-left,margin-right有效；margin-top,margin-bottom 無效：

display:inline-block

　　簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。