【HTML】行内元素和块级元素-优快云博客

HTML 中的行内元素（Inline-level Elements）和块级元素（Block-level Elements）。这是 CSS 视觉格式化模型中最基础且重要的概念。

核心概念

HTML 元素根据其默认的显示行为（display 属性）主要分为两大类：

特性	块级元素 (Block-level Elements)	行内元素 (Inline-level Elements)
默认 `display` 值	`block`	`inline`
占位方式	独占一行，从上到下垂直排列。	不独占一行，与其他行内元素在同一行内从左到右水平排列，直到排满才换行。
尺寸设置	可以设置宽度 (`width`) 和高度 (`height`)。	不可以设置宽度 (`width`) 和高度 (`height`)。其大小由内容决定。
边距 (Margin) 和内边距 (Padding)	四个方向的 `margin` 和 `padding` 都有效。	水平方向的 `margin` 和 `padding` 有效。垂直方向的 `margin` 无效，垂直方向的 `padding` 有效但不会影响布局（不会撑开父元素高度）。
包含关系	可以包含其他块级元素和行内元素。	通常只能包含其他行内元素和文本，不能包含块级元素（有例外）。

常见元素举例

常见的块级元素 (Block-level Elements)

这些元素通常用于构建页面的结构布局。

<div>         <!-- 通用容器，最常用的块级元素 -->
<p>           <!-- 段落 -->
<h1> - <h6>   <!-- 标题 -->
<ul>, <ol>    <!-- 无序/有序列表 -->
<li>          <!-- 列表项 -->
<table>       <!-- 表格 -->
<form>        <!-- 表单 -->
<header>      <!-- 页眉 -->
<footer>      <!-- 页脚 -->
<section>     <!-- 章节 -->
<article>     <!-- 文章 -->
<aside>       <!-- 侧边栏 -->
<nav>         <!-- 导航 -->
<main>        <!-- 主体内容 -->
<figure>      <!-- 独立内容流（如图像） -->
<figcaption>  <!-- figure 的标题 -->
<blockquote>  <!-- 块引用 -->
<hr>          <!-- 水平分割线 -->

常见的行内元素 (Inline-level Elements)

这些元素通常用于包裹文本内容或小图标，修饰段落的一部分。

<span>        <!-- 通用行内容器，最常用的行内元素 -->
<a>           <!-- 锚点/超链接 -->
<strong>      <!-- 加粗（语义化） -->
<b>           <!-- 加粗（纯样式） -->
<em>          <!-- 强调（斜体，语义化） -->
<i>           <!-- 斜体（纯样式，常用于图标） -->
<code>        <!-- 代码片段 -->
<sup>         <!-- 上标 -->
<sub>         <!-- 下标 -->
<br>          <!-- 换行 -->
<button>      <!-- 按钮 -->
<input>       <!-- 输入框 -->
<select>      <!-- 下拉选择框 -->
<textarea>    <!-- 多行文本域 -->
<label>       <!-- 表单标签 -->
<img>         <!-- 图像 -->
<video>       <!-- 视频 -->
<audio>       <!-- 音频 -->

示例

下面的代码展示了块级元素和行内元素的区别：

<!DOCTYPE html>
<html>
<head>
  <style>
    .block-demo {
      background-color: lightblue;
      margin: 10px 0; /* 上下外边距有效 */
      padding: 20px;  /* 内边距有效 */
      /* width: 200px; 可以设置宽度 */
      /* height: 50px; 可以设置高度 */
    }
    .inline-demo {
      background-color: lightcoral;
      margin: 0 20px; /* 只有左右外边距有效 */
      padding: 20px;  /* 内边距有效，但垂直方向不影响布局 */
      /* width: 200px; 设置无效！ */
      /* height: 50px; 设置无效！ */
    }
  </style>
</head>
<body>
  <!-- 块级元素：每个都独占一行 -->
  <div class="block-demo">块级元素 (Div 1)</div>
  <div class="block-demo">块级元素 (Div 2)</div>
  <p class="block-demo">这是一个段落块级元素。</p>

  <!-- 行内元素：在同一行排列 -->
  <p>
    这是一段文本，里面包含了
    <span class="inline-demo">行内元素 (Span 1)</span>，
    还有一个<a href="#" class="inline-demo">链接（也是行内元素）</a>，
    以及一个<strong class="inline-demo">加粗元素</strong>。
    它们都在同一行内水平排列。
  </p>
</body>
</html>

特殊情况：行内块元素 (Inline-block)

还有一种常见的显示类型 display: inline-block;，它融合了两种元素的特性：

特性	行内块元素 (Inline-block Elements)
占位方式	像行内元素一样，不独占一行，与其他行内或行内块元素在同一行排列。
尺寸设置	像块级元素一样，可以设置宽度 (`width`) 和高度 (`height`)。
边距和内边距	像块级元素一样，四个方向的 `margin` 和 `padding` 都有效，且会影响布局。

常见应用： 让多个可以设置大小的元素（如图标、卡片、按钮）在同一行内水平排列。

<style>
  .inline-block-demo {
    display: inline-block; /* 关键属性 */
    width: 100px;
    height: 100px;
    margin: 10px; /* 上下左右外边距都有效 */
    padding: 10px; /* 内边距也有效 */
    background-color: lightgreen;
  }
</style>

<div class="inline-block-demo">Box 1</div>
<div class="inline-block-demo">Box 2</div>
<div class="inline-block-demo">Box 3</div>

总结与注意事项

布局核心：理解块级和行内元素是掌握 CSS 布局（如 Flexbox 和 Grid）的基础。
嵌套规则：
- 行内元素不能包含块级元素（例如，不能在 <a> 或 <span> 里放 <div>）。
- 某些元素有特殊的嵌套规则（如 <p> 标签内不能包含其他块级元素）。
可通过 CSS 改变：任何元素的 display 属性都可以通过 CSS 覆盖。例如，可以把 <div> 设为 display: inline;，或者把 <span> 设为 display: block;。这是现代 CSS 布局的常见做法。
HTML5 的新分类：在 HTML5 标准中，元素被分为更细致的类别（如流内容、分区内容、标题内容等），但“块级”和“行内”仍然是描述其默认 CSS 表现最实用的方式。