組成一個網頁的兩種元素與它的行為模式。
- 區塊元素 block
- 行內元素 inline
CSS
規範規定,每个元素都有display
這個屬性,每個元素都有默認的display
值。
div
默認display
屬性值為block
,為區塊元素;
span
默認display
屬性值為inline
,為行内元素。
# 區塊元素(block)
會獨占一行,其寬度會自動填滿父級元素的寬度
- 可以設定
width
與height
,但設定完後還是會獨自佔據一行。 - 可以設定
margin
與padding
。 如<h1>
、<div>
、<p>
、<ul>
、<table>
等。
# 行內元素(inline)
行內元素不會獨占一行,相鄰的行內元素會擠到一行內,直到一行的內容排滿才會自動換行,寬度會隨內容的變化而變化
- 設定
width
和height
會沒有效果。 - 設定
margin
與padding
,只有水平方向上有效果、垂直方向上沒有效果。
如<b>
、<td>
、<a>
、<img>
、<span>
等。