关键词：行内元素、块级元素
HTML 中的行内元素（Inline elements）和块级元素（Block-level elements）在布局行为、外观以及如何参与文档流方面有所不同。以下是它们的主要区别：
| 特性 | 块级元素(Block-level elements) | 行内元素(Inline elements) |
|---|---|---|
| 布局 | 通常开始于新的一行 | 在同一行内水平排列 |
| 宽度 | 默认填满父容器宽度 | 宽度由内容决定 |
| 高度 | 可以设置高度 | 高度通常由内容决定 |
| 外边距(margin) | 可以设置上下左右的外边距 | 只能设置左右外边距 |
| 内边距(padding) | 可以设置上下左右的内边距 | 只能设置左右内边距 |
| 内容 | 可以包含其他块级或行内元素 | 通常包含文本或数据 |
| 堆叠方式 | 垂直堆叠 | 水平方堆放齐 |
| 盒模型 | 表现为完整的盒子模型 | 只表现部分盒子模型 |
| 换行 | 前后有换行空间 | 默认没有前后换行空间 |
| 常见标签 | <div>, <p>, <section>, <h1> 等 |
<span>, <a>, <strong>, <em>, <img> 等 |
即使块级元素和行内元素默认特征不同，你还是可以通过 CSS 的display属性来更改它们的行为。例如，display: inline;会让块级元素表现得像行内元素，并且它们将在其父容器的同一行内显示。另一方面，display: block;会让行内元素表现得像块级元素。