區塊級元素

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

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

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

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

區塊級元素

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. The "block-level" category roughly corresponds to the category of flow content in HTML5, while "inline" corresponds to phrasing content, 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) HTML5
Article content.
<aside> (en-US) HTML5
Aside content.
<blockquote>
Long ("block") quotation.
<canvas> HTML5
Drawing canvas.
<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) HTML5
Figure caption.
<figure> (en-US) HTML5
Groups media content with a caption (see <figcaption> (en-US)).
<footer> (en-US) HTML5
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) HTML5
Section or page header.
<hgroup> (en-US) HTML5
Groups header information.
<hr>
Horizontal rule (dividing line).
<li> (en-US)
List item.
<main> (en-US)
Contains the central content unique to this document.
<nav>
Contains navigation links.
<noscript> (en-US)
Content to use if scripting is not supported or turned off.
<ol> (en-US)
Ordered list.
<output> (en-US) HTML5
Form output.
<p> (en-US)
Paragraph.
<pre> (en-US)
Preformatted text.
<section> (en-US) HTML5
Section of a web page.
<table>
Table.
<tfoot> (en-US)
Table footer.
<ul> (en-US)
Unordered list.
<video> (en-US) HTML5
Video player.


參閱