display:inline,inline-block,block元素的區別

weixin_34402090發表於2012-12-22

塊元素 display:block

1.我是塊級元素,總是在新的一行開始

2.寬度,高度,行高,以及頂和底都可以控制。(預設是容器的寬和高的100%)

3.我的垂直相鄰外邊距會合並,預設取最大值

內聯元素 display:inline

1.我是行內元素,和其他元素在同一行上。

2.寬度,高度,行高,以及頂和底都不可以改變。(預設是自身的寬和高)

3.我麼有上下外邊距,但是我的左右邊距不會合並。

inline-block元素(介於內聯元素和塊元素之間)

1.我是inline-block元素,我是內聯物件,但是我裡面的內容作為塊物件呈遞。旁邊的內聯物件會被呈現在同一行。

2.寬度,高度,行高,以及頂和底都可以控制。

3.我和內聯元素一樣,元素中間預設會有空隙。

下一篇文章中會講:如何去除內聯元素(inline-block元素)之間的間距

相關文章