區塊級元素

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

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

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

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

區塊級元素

HTML

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

CSS

p { background-color: #8ABB55; }

用法

區塊級 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> (en-US)

Contact information.

<article> (en-US)

Article content.

<aside> (en-US)

Aside content.

<blockquote>

Long ("block") quotation.

<dialog> (en-US)

Dialog box.

<dd> (en-US)

Describes a term in a description list.

<div>

Document division.

<dl> (en-US)

Description list.

<dt> (en-US)

Description list term.

<fieldset> (en-US)

Field set label.

<figcaption> (en-US)

Figure caption.

<figure> (en-US)

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

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.

<header> (en-US)

Section or page header.

<hgroup> (en-US)

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> (en-US)

Paragraph.

<pre> (en-US)

Preformatted text.

<section> (en-US)

Section of a web page.

<table>

Table.

<ul> (en-US)

Unordered list.

參閱