如何在HTML中使用内联级和块级元素

本教程将教您 HTML 中的内联级和块级元素之间的区别，以及它们如何影响页面上一段内容的位置。

在 HTML 文档中排列元素时，了解这些元素如何占用网页空间非常重要。某些元素在网页上占用的空间比它们包含的内容要多得多。了解不同元素类型的行为将帮助您预测它们如何影响页面上其他元素的位置。

一般来说，有两种不同类型的元素——行内元素和块级元素——它们的间距默认值彼此不同。下面，我们将描述这些元素的默认设置如何确定它们在网页上的位置以及相对于附近元素的位置。

内联元素

内联元素 是水平宽度由它们包含的内容的宽度决定的元素。我们在上一篇教程中介绍的 <strong> 元素和 <em> 元素都是内联元素的示例。

我们可以使用 Firefox 的 Web Developer Inspector 来检查网页上 HTML 元素的大小。（如果您使用的是 Chrome，您可以改用 Developer Inspect Elements 工具，但本教程将提供有关 Firefox 的 Web Developer 工具的说明。）

返回到您在浏览器中加载的 index.html 文件。如果您需要重新加载但不记得如何重新加载，请参阅上一教程中的说明在浏览器中加载 HTML 文件。

然后导航到顶部菜单栏中的“工具”菜单项，然后选择“Web Developer/Inspector”。选择此菜单项将打开 Inspector 界面，允许您检查网页的 HTML 和 CSS。接下来，将光标悬停在文本 My strong text 上，该文本应以浅蓝色突出显示。此突出显示显示光标悬停的元素所占用空间的全部范围。如您所料，元素占用的空间刚好足以容纳其文本内容：

与我们将在下一节中介绍的块级元素不同，内联元素不占用它们自己的水平空间行。因此，如果您不使用其他 HTML 元素（例如换行符 <br> 元素）指定分隔符，则内联元素将并排放置在网页上。这种大小默认设置通常很方便，因为您可能希望使用 <strong> 或 <em> 等内联元素标记段落中的单个单词，而不会将后续文本推送到下一行。

尝试在 index.html 文件的两行代码之间添加 <br> 标签。（您需要在文本编辑器中返回您的文件。）请注意，<br> 元素只需要一个开始标记，并且不会环绕任何文本：

<strong>My strong text</strong>
<br>
<em>My emphasized text</em>

在浏览器中保存并重新加载文档以检查结果。您应该会收到如下信息：

我的强文 我强调的文字

您的两个短语现在应该位于不同的行上，因为它们现在由换行符元素 <br> 分隔。

如果使用 Firefox Web Developer Inspector 检查元素的大小，可以确认每个文本元素的宽度仍然由文本内容的宽度决定：

![再次检查元素] (https://assets.digitalocean.com/articles/how-to-build-a-website-with-html/inspect-element2-min.gif)

块级元素

块级元素 与行内级元素的行为不同，因为它们占据了网页上的一整行水平空间。这意味着它们会自动从新行开始，并且它们也会自动将后续元素推送到新行。

例如，HTML 标题元素（<h1> 到 <h6>）是块级元素，它们会自动将其内容放在新行上，并将后面的任何内容推送到新行上。这六个标题元素中的每一个都代表不同的标题大小。

让我们研究一下这在实践中是如何工作的。在 index.html 文件的底部，尝试粘贴突出显示的代码片段：

<strong>My strong text</strong>
<br>
<em>My emphasized text</em>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

保存文件并在浏览器中重新加载。您应该会收到如下信息：

现在让我们检查块级标题元素以研究它们与上面的行内级文本元素有何不同。打开 Firefox Web Developer Inspector 并将鼠标悬停在每个元素上以检查它们占用的空间，如蓝色突出显示所示。您应该能够确认每个行内元素的水平占用空间是由其文本内容决定的，而每个块级元素的水平占用空间是横跨整个网页的：

块级元素 将始终 将内联级元素向下推到下一行，即使您将这些 HTML 元素写在 HTML 文档的同一行。要自己确认这一点，请尝试在 index.html 文件的同一行上编写块级元素和行内级元素。从文件中删除现有内容并添加以下代码段：

<strong>My strong text</strong><h1>My heading</h1><em>My emphasized text</a>

你能猜出这段 HTML 代码将如何在浏览器中呈现吗？保存文件并在浏览器中重新加载。您应该会收到如下信息：

请注意，标题元素 <h1> 已从新行开始，并将随后的文本元素推送到新行，即使这些元素写在 HTML 文档的同一行。

您现在应该了解内联级和块级元素的定位方式以及它们如何影响附近元素的位置。在将来安排 HTML 元素时，记住它们不同的行为会很有用。

我们将在接下来的教程中继续学习新的内联和块元素。