块级元素和内联元素

<div>是块级元素

<span>是内联元素

Block versus inline elements

There are two important categories of elements to know in HTML: block-level elements and inline elements.

• Block-level elements form a visible block on a page. A block-level element appears on a new line following the content that precedes it. Any content that follows a block-level element also appears on a new line. Block-level elements are usually structural elements on the page. For example, a block-level element might represent headings, paragraphs, lists, navigation menus, or footers. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.
• Inline elements are contained within block-level elements, and surround only small parts of the document's content (not entire paragraphs or groupings of content). An inline element will not cause a new line to appear in the document. It is typically used with text, for example an <a> element creates a hyperlink, and elements such as <em> or <strong> create emphasis.

Consider the following example:

<  code ><  span class="token tag"><  span class="token punctuation"><  em<  span class="token punctuation">>   first<  span class="token tag"><  span class="token punctuation"> em<  span class="token punctuation">>   <  span class="token tag"><  span class="token punctuation"><  em<  span class="token punctuation">>   second<  span class="token tag"><  span class="token punctuation"> em<  span class="token punctuation">>   <  span class="token tag"><  span class="token punctuation"><  em<  span class="token punctuation">>   third<  span class="token tag"><  span class="token punctuation"> em<  span class="token punctuation">>  

<  span class="token tag"><  span class="token punctuation"><  p<  span class="token punctuation">>   fourth<  span class="token tag"><  span class="token punctuation"> p<  span class="token punctuation">>  
<  span class="token tag"><  span class="token punctuation"><  p<  span class="token punctuation">>   fifth<  span class="token tag"><  span class="token punctuation"> p<  span class="token punctuation">>  
<  span class="token tag"><  span class="token punctuation"><  p<  span class="token punctuation">>   sixth<  span class="token tag"><  span class="token punctuation"> p<  span class="token punctuation">>  

Copy to Clipboard

<em> is an inline element. As you see below, the first three elements sit on the same line, with no space in between. On the other hand, <p> is a block-level element. Each p element appears on a new line, with space above and below. (The spacing is due to default CSS styling that the browser applies to paragraphs.)

Note: HTML5 redefined the element categories: see Element content categories. While these definitions are more accurate and less ambiguous than their predecessors, the new definitions are a lot more complicated to understand than block and inline. This article will stay with these two terms.

Note: The terms block and inline, as used in this article, should not be confused with the types of CSS boxes that have the same names. While the names correlate by default, changing the CSS display type doesn't change the category of the element, and doesn't affect which elements it can contain and which elements it can be contained in. One reason HTML5 dropped these terms was to prevent this rather common confusion.

Note: Find useful reference pages that include lists of block and inline elements. See Block-level elements and Inline elements.

块级元素和内联元素

在 HTML 中有两种你需要知道的重要元素类别，块级元素和内联元素。

• 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
• 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间，例如超链接元素 <a> 或者强调元素：<em> 和 <strong>。

看一看下面的例子：

<  code ><  span class="token tag"><  span class="token punctuation"><  em<  span class="token punctuation">>   第一<  span class="token tag"><  span class="token punctuation"> em<  span class="token punctuation">>   <  span class="token tag"><  span class="token punctuation"><  em<  span class="token punctuation">>   第二<  span class="token tag"><  span class="token punctuation"> em<  span class="token punctuation">>   <  span class="token tag"><  span class="token punctuation"><  em<  span class="token punctuation">>   第三<  span class="token tag"><  span class="token punctuation"> em<  span class="token punctuation">>  

<  span class="token tag"><  span class="token punctuation"><  p<  span class="token punctuation">>   第四<  span class="token tag"><  span class="token punctuation"> p<  span class="token punctuation">>   <  span class="token tag"><  span class="token punctuation"><  p<  span class="token punctuation">>   第五<  span class="token tag"><  span class="token punctuation"> p<  span class="token punctuation">>   <  span class="token tag"><  span class="token punctuation"><  p<  span class="token punctuation">>   第六<  span class="token tag"><  span class="token punctuation"> p<  span class="token punctuation">>  

Copy to Clipboard

<em> 是一个内联元素，所以就像你在下方可以看到的，第一行代码中的三个元素都没有间隙的展示在了同一行。而 <p> 是一个块级元素，所以第二行代码中的每个元素分别都另起了新的一行展现，并且每个段落间都有一些间隔（这是因为默认的浏览器有着默认的展示 <p> 元素的 CSS 样式）。

备注： HTML5 重新定义了元素的类别：见 元素内容分类(译文)。尽管这些新的定义更精确，但却比上述的“块级元素”和“内联元素”更难理解，因此在之后的讨论中仍使用旧的定义。

备注： 在这篇文章中提到的“块”和“内联”，不应该与 CSS 盒子的类型中的同名术语相混淆。尽管它们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的原因之一。

备注： 你可以查阅包含了块级元素和内联元素列表的参考页面—see Block-level elements and Inline elements.