區塊級元素

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

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

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

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

區塊級元素

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;
}

區塊級 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.

區塊級元素

區塊級元素

HTML

CSS

用法

區塊級 vs. 行內元素

相關元素

參閱