Block & Inline

組成一個網頁的兩種元素與它的行為模式。

  1. 區塊元素 block
  2. 行內元素 inline

CSS規範規定,每个元素都有display這個屬性,每個元素都有默認的display值。

div默認display屬性值為block,為區塊元素;

span默認display屬性值為inline,為行内元素。

# 區塊元素(block)

block

會獨占一行,其寬度會自動填滿父級元素的寬度

  • 可以設定widthheight,但設定完後還是會獨自佔據一行。
  • 可以設定marginpadding。 ​ 如<h1><div><p><ul><table>等。

# 行內元素(inline)

inline

行內元素不會獨占一行,相鄰的行內元素會擠到一行內,直到一行的內容排滿才會自動換行,寬度會隨內容的變化而變化

  • 設定widthheight會沒有效果。
  • 設定marginpadding,只有水平方向上有效果、垂直方向上沒有效果。

<b><td><a><img><span>等。