Simple Block, Simple Inline.

關於 Block 和 Inline 的概念，我們可以從 HTML 和 CSS 這兩方面去了解。

Block & Inline in HTML

在 HTML ， Block 和 Inline 的概念可以體現在 Block-level Elements 和 Inline(-level) Elements 上。

Block-level 和 inline 是 HTML 中 elements 的兩個種類，能在 body 裡面出現的 element 幾乎都可以歸成這兩類的其中之一，它們之間的分別我們可以從三方面予以了解。

Formatting

一般來說 block-level elements 的最上方和最下方都會有換行，而 inline elements 則隨著文字的順位出現，和 CSS 所控制的 Presentation 不同，這就算是在老到掉牙、不支援 Style Sheet 的 browsers 上也會正確地顯示出來。

Content Model

Block-level elements 可以分成三種：能容納其他 block-level elements 或 inline elements (像 div) ；只能容納 block-level elements (Strict document type 的 body) ；只能容納 inline elements 和 text (有經常用到的 p) 。 Block-level elements 作為其他 elements 和 text 的容器，可以說是構成整個文件結構的主要部份。

Inline elements 則只能容納其他 inline elements 和文字 (object 例外) ， 一般都帶有意思，包含了 HTML 中大部分的語意 (semantics) 。

Directionality

這不在本文的討論範圍內。

至於 del 和 ins 這兩個 elements 的情況則有點特殊，它們跟據不同的情況，可以是 block-level ，也可以是 inline 。

注意 DTD 中定義了什麼 elements 是 block-level 、什麼 elements 是 inline ，我們沒法子改變。

Block & Inline in CSS

在 CSS 裡， block 和 inline 的概念表現在所謂的 box 裡。 Elements 產生 boxes ，而 boxes 可以被理解為一個個長方形的框，這些框是作為 document 本身視覺上的表達而存在，但 boxes 本身不等於 elements ，一個 element 可以產生多個或是根本不產生 boxes 。粗略地說， block-level elements (HTML) 產生 block boxes ，而 inline elements 產生 inline boxes 。

和 HTML 不同， CSS 裡可以透過 display 這個 property 去改變 boxes 的種類。在無視掉 table 系那十個 values 後，跟據 display property 不同的 value 將會產生或 inline 或 block 的 boxes ：

1. block
2. list-item
3. run-in (某些情況)
4. table (有點不同)

會產生 block boxes 。

1. inline
2. run-in (某些情況)

會產生 inline boxes 。

另外也有其他情況會產生 block boxes ，像是 float 跟 absolute positioning 的場合，本文暫不詳述。

在下一篇文章將會深入探討所謂的 block boxes (如果有的話 XD) 。