元素 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 属性就相当重要，透过这篇教学所整理的对照表，相信能对网页排版能有不少帮助。
微信扫码关注
抖音扫码关注