HTML块级和行级 - 块级元素与行内元素完全指南

概述

HTML元素根据其显示特性可以分为两大类：块级元素（Block-level Elements）和行内元素（Inline Elements）。理解这两者的区别对于掌握CSS布局至关重要。

块级元素独占一行，从新行开始显示
行内元素与其他行内元素共享一行，不会自动换行
块级元素可以设置宽度、高度、内边距和外边距
行内元素设置宽度、高度无效，但水平外边距和内边距有效

块级元素

块级元素是那些会独占一行的元素。浏览器会在块级元素前后自动添加换行符。

块级元素的特点

默认宽度是100%，即占满父元素的可用宽度
可以设置 width、height、margin、padding 所有属性
总是从新行开始显示
可以包含块级元素和行内元素

常见的块级元素

<div>      - 通用容器
<p>        - 段落
<h1>-<h6> - 标题
<ul>      - 无序列表
<ol>      - 有序列表
<li>      - 列表项
<table>   - 表格
<form>    - 表单
<header>  - 页面头部
<footer> - 页面底部
<nav>     - 导航区域
<section> - 章节
<article> - 文章
<aside>   - 侧边栏
<main>    - 主要内容
<figure>  - 图表
<hr>      - 水平线
<pre>     - 预格式化文本
<blockquote> - 引用

块级元素示例

下面展示了几个块级元素的默认行为：

<h1>这是一个H1标题</h1>
<h2>这是一个H2标题</h2>
<p>这是一个段落元素</p>
<div>这是一个DIV元素</div>

每个元素都会独占一行。

行内元素

行内元素（也叫内联元素）不会独占一行，它们会在同一行内显示，直到该行满为止。

行内元素的特点

默认宽度是内容的宽度
设置 width、height 无效
水平方向的 margin 和 padding 有效
垂直方向的 margin 和 padding 效果特殊（不影响行高）
不能包含块级元素，但可以包含其他行内元素

常见的行内元素

<span>     - 通用容器（行内）
<a>        - 链接
<strong>   - 加粗（强调）
<b>        - 加粗
<em>       - 斜体（强调）
<i>        - 斜体
<img>     - 图片
<br>       - 换行
<input>   - 输入框
<label>   - 标签
<code>    - 代码
<small>   - 小字体
<sub>     - 下标
<sup>     - 上标
<mark>    - 高亮
<time>    - 时间

行内元素示例

<span>这是第一个span</span>
<span>这是第二个span</span>
<span>这是第三个span</span>

所有span元素会在同一行显示。

块级与行内的区别

特性	块级元素	行内元素
换行	自动换行	不自动换行
默认宽度	100%	内容宽度
width/height	可设置	无效
margin	四周有效	仅水平有效
padding	四周有效	水平有效，垂直不占空间
包含内容	块级和行内	仅行内

CSS display 属性

使用 CSS 的 display 属性可以改变元素的显示类型：

display: block

将元素显示为块级元素：

<span style="display: block;">这个span变成块级元素了</span>
<span style="display: block;">这个也是块级，会换行</span>

display: inline

将元素显示为行内元素：

<div style="display: inline;">这个div变成行内元素了</div>
<div style="display: inline;">这个和上面在同一行</div>

display: inline-block

结合块级和行内的特点：可以设置宽高，但不会独占一行：

<div style="display: inline-block; width: 100px; height: 50px; background: #3498db;">盒子1</div>
<div style="display: inline-block; width: 100px; height: 50px; background: #e74c3c;">盒子2</div>

两个盒子会在同一行显示，但各自拥有独立的宽高属性。

交互式示例

在下面的代码编辑器中，尝试修改 display 属性的值，观察元素显示的变化：

💻 在线代码编辑器

👁️ 预览效果

最佳实践

建议

使用语义化的HTML5标签（如 <header>、<nav>、<main> 等）代替 <div> 进行布局
在现代布局中，flexbox 和 grid 是更强大的布局工具，不要局限于块级/行内的概念
行内元素内部不应包含块级元素，这是不符合规范的
使用 display: inline-block 时注意处理元素间的空白间距
链接 <a> 是特殊的行内元素，它可以包含块级元素（HTML5特性）

HTML 块级和行级

概述