CSS 零基础教程

块级元素 vs 行内元素

了解元素默认的行为方式能够让我们更方便控制网页布局。

本章将深入探讨 块级元素 (Block-level elements) 和 行内元素 (Inline elements) 的基本概念。这两个概念决定了元素在文档的“普通流”中是如何定位以及如何相互作用的。

掌握这些概念是创建更复杂、更美观布局的第一步。

1. 块级元素 (Block-Level Elements)

块级元素旨在网页上创建内容块。它们具有特定的特征，会影响它们在文档流中的行为。

1.1 块级元素的特征

  • 占据所有可用宽度： 默认情况下，块级元素会拉伸以填满其父容器的整个宽度。
  • 另起一行： 每个块级元素都从新的一行开始，从而形成垂直堆叠的内容。
  • 遵循 width 和 height 属性： 你可以明确设置块级元素的 width（宽度）和 height（高度）。
  • 拥有四个方向的边距和内边距： 你可以对块级元素的上、下、左、右四个方向应用 margin（外边距）和 padding（内边距）。
  • 可以包含行内元素和其他块级元素： 块级元素可以作为其他元素的容器，包括行内元素和其他块级元素。

1.2 常见的块级元素

以下是一些最常用的块级元素：

  • <div>: 一个通用的容器元素，没有语义含义。它通常用作应用样式或分组内容的挂钩。
  • <p>: 代表一段文本。
  • <h1> 到 <h6>: 代表不同级别的标题。<h1> 是最重要的标题，<h6> 是最次要的。
  • <form>: 代表用于用户输入的 HTML 表单。
  • <header>: 代表文档或部分的介绍性内容。
  • <footer>: 代表文档或部分的页脚内容。
  • <section>: 代表内容的专题分组。
  • <nav>: 代表导航链接部分。
  • <article>: 代表文档、页面、应用程序或网站中独立的内容块。
  • <aside>: 代表与其周围内容间接相关的内容部分（侧边栏）。
  • <ol>: 代表有序列表。
  • <ul>: 代表无序列表。
  • <li>: 代表列表项。

1.3 块级元素示例

考虑以下 HTML 结构：

<div>
  <h1>欢迎来到中文开发现代教程网</h1>
  <p>这是一段文本。</p>
</div>

在这个例子中，<div>、<h1> 和 <p> 元素都是块级元素。它们每个都会占据其父容器（在本例中为 <div>）的全部宽度，并且会垂直堆叠，一个在另一个之上。

1.4 控制块级元素的宽度

虽然块级元素默认占据父元素的全部宽度，但你可以使用 CSS 中的 width 属性来控制它们的宽度。

<div style="width: 500px;">
  <h1>欢迎来到中文开发现代教程网</h1>
  <p>这是一段文本。</p>
</div>

在这种情况下，<div> 元素及其子元素（除非另有说明）将被限制为 500 像素的宽度。

1.5 块级元素的边距和内边距

Margins (外边距) 在元素外部创建空间，而 Padding (内边距) 在元素内部创建空间。两者都可用于控制块级元素的间距和视觉外观。

<div style="margin: 20px; padding: 10px; border: 1px solid black;">
  <h1>欢迎来到中文开发现代教程网</h1>
  <p>这是一段文本。</p>
</div>

2. 行内元素 (Inline Elements)

与块级元素相反，行内元素旨在在周围的文本内流动。它们只占据包含其内容所需的宽度。

2.1 行内元素的特征

  • 不另起一行： 行内元素在周围的文本内流动，不会强制换行。
  • 仅占据内容所需的宽度： 行内元素只占据其内容所需的水平空间。
  • 遵循左右边距和内边距，但不遵循上下： 你可以对行内元素应用 margin-left、margin-right、padding-left 和 padding-right，但 margin-top、margin-bottom、padding-top 和 padding-bottom 通常会被忽略（或者它们不会推开周围的元素，其行为受 line-height 属性影响）。
  • 不能包含块级元素： 行内元素只能包含其他行内元素或文本。
  • 忽略 width 和 height 属性： 你不能直接设置行内元素的 width 和 height。其大小由内容决定。

2.2 常见的行内元素

以下是一些最常用的行内元素：

  • <span>: 一个通用的行内容器元素，没有语义含义。它通常用于将样式应用于文本的特定部分。
  • <a>: 代表超链接。
  • <img>: 代表图像。
  • <strong>: 代表重要文本，通常以粗体显示。
  • <em>: 代表强调文本，通常以斜体显示。
  • <code>: 代表计算机代码片段。
  • <br>: 代表换行。

2.3 行内元素示例

考虑以下 HTML 结构：

<p>这是一个段落内的 <span>span</span> 元素。</p>

在这个例子中，<span> 元素是一个行内元素。它会在段落文本内流动，而不会强制换行。

2.4 行内元素的边距和内边距

如前所述，行内元素只遵循左右外边距和内边距。上下外边距和内边距会被忽略（或不影响布局）。

<p>这是一个段落内的 <span style="margin: 0 20px; padding: 0 10px; border: 1px solid black;">span</span> 元素。</p>

这段代码将在 <span> 元素的左右添加 20 像素的外边距，在左右添加 10 像素的内边距，但上下的外边距和内边距将没有任何效果。

3. 改变元素的显示类型 (Display Type)

CSS 中的 display 属性允许你改变元素的默认显示行为。这意味着你可以让块级元素像行内元素一样通过，反之亦然。

3.1 display: block

此值强制元素表现得像块级元素，无论其默认显示类型如何。

3.2 display: inline

此值强制元素表现得像行内元素。

3.3 display: inline-block

此值是 inline 和 block 的混合体。它允许元素像行内元素一样在周围文本中流动，但也允许你设置它的 width 和 height，并且像块级元素一样遵循所有的边距和内边距。

3.4 改变显示类型的示例

<div style="display: inline;">这是一个 div</div>
<span style="display: block;">这是一个 span</span>
<a style="display: inline-block; width: 100px; height: 50px; border: 1px solid black;">这是一个链接</a>

在这个例子中：

  • <div> 元素被强制表现得像行内元素。
  • <span> 元素被强制表现得像块级元素。
  • <a> 元素被强制表现得像行内块（inline-block）元素，允许你设置它的宽度和高度，同时仍然在周围的文本内流动。

4. 实用案例与演示

让我们通过一些实际例子来巩固你对块级和行内元素的理解。

4.1 案例 1：导航菜单

inline-block 元素的一个常见用例是创建水平导航菜单。

<nav>
  <a href="#" style="display: inline-block; padding: 10px; text-decoration: none; color: black;">首页</a>
  <a href="#" style="display: inline-block;  padding: 10px; text-decoration: none; color: black;">关于我们</a>
  <a href="#" style="display: inline-block;  padding: 10px; text-decoration: none; color: black;">服务</a>
  <a href="#" style="display: inline-block;  padding: 10px; text-decoration: none; color: black;">联系方式</a>
</nav>

在这个例子中，<a> 元素被设置为 display: inline-block，允许它们水平并排，同时也允许你控制它们的内边距和尺寸。

4.2 案例 2：使用 Span 设置文本样式

Span 通常用于设置段落内特定部分的文本样式。

<p>这是一个包含 <span style="color: red; font-weight: bold;">特殊</span> 词汇的段落。</p>

在这个例子中，<span> 元素用于将红色和粗体字重应用于段落中的“特殊”一词。

4.3 案例 3：创建简单布局

块级元素可用于创建基本的页面布局。

<header style="background-color: #eee; padding: 20px;">
  <h1>现代教程</h1>
</header>
<nav style="background-color: #ddd; padding: 10px;">
  <a href="#">首页</a> |
  <a href="#">关于我们</a> |
  <a href="#">服务</a> |
  <a href="#">联系方式</a>
</nav>
<main style="padding: 20px;">
  <p>这是页面的主要内容。</p>
</main>
<footer style="background-color: #eee; padding: 10px; text-align: center;">
  <p>© 2026 现代教程</p>
</footer>

在这个例子中，<header>、<nav>、<main> 和 <footer> 元素都是块级元素，它们创建了页面的不同部分。