元素 display 對照表
HTML 裡每個元素都有自己的 display 屬性，這篇教學會列出大部分常用的元素，並整理出預設的 display 屬性對照表，透過元素 display 對照表，清楚掌握每個元素在 HTML 裡的顯示特性。
請先閱讀：容器顯示類型 ( display )
快速導覽：
常用元素
這些元素是 HTML 裡使用頻率非常高的元素，這些元素的 display 屬性通常不是 block 就是 inline，只有 img 元素是 inline-block。
| 元素 | 預設 display 屬性 | 前後強制換行 | 調整寬高 |
|---|---|---|---|
| h1～h6 | block | O | O |
| p | block | O | O |
| div | block | O | O |
| hr | block | O | O |
| span | inline | X | X |
| a | inline | X | X |
| img | inline-block | X | O |
| iframe | inline-block | X | O |
文字樣式元素
HTML 的文字樣式元素主要負責呈現文字的「語意」，由於這些樣式元素都是在處理文字，因此 display 屬性大部分都是 inline，只有少數是 block、 ruby。
| 元素 | 預設 display 屬性 | 前後強制換行 | 調整寬高 |
|---|---|---|---|
| strong、b | inline | X | X |
| em、i | inline | X | X |
| del | inline | X | X |
| ins | inline | X | X |
| small | inline | X | X |
| sup、sub | inline | X | X |
| mark | inline | X | X |
| q、cite | inline | X | X |
| kbd | inline | X | X |
| abbr | inline | X | X |
| code | inline | X | X |
| pre | block | O | O |
| blockquote | block | O | O |
| address | block | O | O |
| ruby | ruby | X | X |
| rt、rp | ruby-text | X | X |
表格＆清單元素
表格和清單元素的 display 比較特殊，雖然外部顯示行為是「block」，但預設卻是使用內容特性的屬性值，最主要目的是為了讓子元素可以根據內容特性進行排版。
| 元素 | 預設 display 屬性 | 前後強制換行 | 調整寬高 |
|---|---|---|---|
| ul | block | O | O |
| ol | block | O | O |
| li | list-item | O | O |
| dl、dt、dd | block | O | O |
| table | table | O | O |
| tr | table-row | O | 高 O 寬 X |
| td | table-cell | X | O |
| th | table-cell | X | O |
| caption | table-caption | O | O |
| thead | table-header-group | O | 高 O 寬 X |
| tbody | table-row-group | O | 高 O 寬 X |
| tfoot | table-footer-group | O | 高 O 寬 X |
| col | table-column | X | 高 X 寬 O |
| colgroup | table-column-group | X | 高 X 寬 O |
表單元素
標單元素大多是 inline-block 屬性，但由於瀏覽器會自動渲染表單元素，不同瀏覽器所渲染的預設值也會有所不同，有時在部分細節樣式上會有差異。
| 元素 | 預設 display 屬性 | 前後強制換行 | 調整寬高 |
|---|---|---|---|
| form | block | O | O |
| input | inline-block | X | O |
| button | inline-block | X | O |
| textarea | inline-block | X | O |
| select | inline-block | X | O |
| progress | inline-block | X | O |
| label | inline | X | X |
| datalist | none | X | X |
| fieldset | block | O | O |
使用時需要注意「對齊」的表現，雖然都是 inline-block 屬性，但 input 和 button 會以內容文字的 baseline 進行對齊，但 textarea 會採用外圍邊緣去對齊 baseline。
語意結構元素
語意結構元素是 HTML5 才出現的元素，由於主要目的是「取代特定名稱的 div」，將常用的區塊結構「語意化」，因此都是 block 屬性，基本上都是當作具有特定意義的 div 使用。
| 元素 | 預設 display 屬性 | 前後強制換行 | 調整寬高 |
|---|---|---|---|
| header | block | O | O |
| main | block | O | O |
| section | block | O | O |
| article | block | O | O |
| aside | block | O | O |
| figure、figcaption | block | O | O |
| nav | block | O | O |
| footer | block | O | O |
圖形＆影音元素
圖形＆影音元素通常用來播放影片或聲音，甚至會搭配 JavaScript 進行動態影像的變化，這些元素的 display 都和 img 一樣都是 inline-block，對齊方式預設使用底部對齊 baseline。
| 元素 | 預設 display 屬性 | 前後強制換行 | 調整寬高 |
|---|---|---|---|
| video | inline-block | X | O |
| audio | inline-block | X | O |
| picture | inline-block | X | O |
| canvas | inline-block | X | O |
| svg | inline-block | X | O |
小結
在網頁排版時，常常會需要使用不同的網頁元素，因此熟悉各個元素的 display 屬性就相當重要，透過這篇教學所整理的對照表，相信能對網頁排版能有不少幫助。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～