區塊級元素

HTML（超文字標記語言, Hypertext Markup Language）元素通常為『區塊級』元素或是『行內級』元素 (en-US)。一個區塊級元素會藉由建立『區塊』的動作，完全佔滿其父元素（容器）的空間。本文將為你說明其意涵.

瀏覽器預設以在元素前後換行的方式，表現區塊級元素。視覺上會呈現為一排縱向堆疊的方塊。

備註： 區塊級元素必定以換行方式，取得完整寬度的空間（向左右兩側儘可能地延伸出去）。

以下範例將展示區塊級元素的影響：

區塊級元素

HTML

html
<p>
  This paragraph is a block-level element; its background has been colored to
  display the paragraph's parent element.
</p>

CSS

css
p {
  background-color: #8abb55;
}

用法

  • 區塊級元素只能出現於 <body> 元素之內。

區塊級 vs. 行內元素

There are a couple of key differences between block-level elements and inline elements:

Formatting

By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.

Content model

Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories (en-US). The "block-level" category roughly corresponds to the category of flow content (en-US) in HTML5, while "inline" corresponds to phrasing content (en-US), but there are additional categories.

相關元素

The following is a complete list of all HTML block level elements (although "block-level" is not technically defined for elements that are new in HTML5).

<address>

Contact information.

<article>

Article content.

<aside>

Aside content.

<blockquote>

Long ("block") quotation.

<dialog> (en-US)

Dialog box.

<dd>

Describes a term in a description list.

<div>

Document division.

<dl>

Description list.

<dt>

Description list term.

<fieldset>

Field set label.

<figcaption>

Figure caption.

<figure>

Groups media content with a caption (see <figcaption>).

Section or page footer.

<form>

Input form.

<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US)

Heading levels 1-6.

Section or page header.

<hgroup>

Groups header information.

<hr>

Horizontal rule (dividing line).

<li> (en-US)

List item.

<main> (en-US)

Contains the central content unique to this document.

Contains navigation links.

<ol> (en-US)

Ordered list.

<p>

Paragraph.

<pre>

Preformatted text.

<section>

Section of a web page.

<table>

Table.

<ul>

Unordered list.

參閱