Inline elements

在 HTML 中, 行内元素是那些只占用定义元素的标记所限定的空间, 而不是破坏内容的流。在本文中, 我们将检查 HTML 行内元素以及它们与块级元素的区别。

行内元素不会在新行上开始, 只需要尽可能多的宽度。

行内元素与块级元素对比

这是最容易用一个简单的例子来证明。首先,我们将使用一些简单的CSS:

.highlight {
  background-color:#ee3;
}

行内

首先,让我们看看下面的示例,它演示了一个内联元素:

<p>The following span is an <span class="highlight">inline element</span>;
its background has been colored to display both the beginning and end of
the inline element's influence.</p>

在此示例中, <p> (段落) 块级元素包含一些文本。在该文本中, 是一个 <span> 元素, 它是一个行内元素。由于<span>元素是行内元素,因此该段落正确呈现为单个完整的文本流,如下所述:

块级别

现在,让我们将该<span>更改为块级元素,如<div>:

<p>The following div is an <div class="highlight">block-level element;</div>
its background has been colored to display both the beginning and end of
the block-level element's influence.</p>

使用与之前相同的CSS呈现，我们得到：

看到区别了吗？<div> 元素完全更改文本的布局, 将其拆分为三段: 在 <div> 之前的文本, 然后是 <div> 的文本, 最后是后面的文本 <div>。

更改元素级别

您可以使用 "CSS 显示" 属性更改元素的级别。内嵌块, 通过将显示的值从 "内联" 更改为 "block", 可以告诉浏览器在块框中而不是在内联框中呈现内联元素。它不一定会使元素呈现出与原来的内嵌块完全一样的效果, 因此请务必查看结果。

概念差异

简而言之,下面是行内和块级元素之间的基本概念差异:

内容模型。通常，行内元素可能只包含数据和其他行内元素。您不能将块元素放在行内元素中.默认情况下，行内元素不会强制在文档流中开始一个新行。另一方面，块元素通常会导致换行（虽然像往常一样，这可以使用CSS进行更改）。

行内元素列表

以下元素默认为行内元素：