1. 程式人生 > >深度理解CSS中塊級元素與行內元素的區別(個人易錯點)

深度理解CSS中塊級元素與行內元素的區別(個人易錯點)

水平 切換 otto display pad 情況 易錯點 寬度 塊級元素

區別一:

塊級:塊級元素會獨占一行,默認情況下寬度自動填滿其父元素寬度

行內:行內元素不會獨占一行,相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。

區別二:

塊級:塊級元素可以設置寬高

行內:行內元素不可以設置寬高

區別三:

塊級:display:block;

行內display:inline;

可以通過修改display屬性來切換塊級元素和行內元素。

區別四:

塊級:塊級元素可以設置margin,padding

行內:行內元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。

深度理解CSS中塊級元素與行內元素的區別(個人易錯點)