塊級元素與行內元素的區別

1、塊級元素的盒子會擴展到與父元素同寬:這就是爲什麼塊級元素獨佔一行的原因了。

2、行內元素的盒子會收縮到包緊其內容:這也是爲什麼幾個連續的行內元素會並排一行的原因。

3、塊級元素可以設置 width、height,而行內元素不行,行內元素的寬高是根據其內容定的。

4、塊級元素的margin 和 padding 設置沒有問題,但是行內元素無法設置上下的 margin 和 padding。

    注:這裏要注意,雖然行內元素上下方向的邊距對佈局沒有影響,但是如果設置了上下的 padding ,背景顏色會擴充到上下的內邊距中。

5、對於 display: inline-block; 的元素,會像行內元素一樣並排在一行,但是可以設置寬高和上下邊距。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章