Box Model (框框模型) 是什麼？
請參閱👉新版解說。包含 3D 動畫展示。
- 說明：css box model 描述出文件中，元素 (elements) 所形成的最基本矩形區域 (boxes) 及專有名詞；此為呈現視覺性 (visual) 版面的重要基礎。
- 適合：有 html 及 css 語法基礎概念者。
- 難度：
- 更新：
只要有東西在版面上描繪 (可以把版面想成一張空白的紙) ，就一定會佔有版面上某些空間，縱使是一個字，也至少就佔了一個字的矩形區域，而這樣的區域被定義為「框」 (boxes) 。
文件內某「一個」元素的「框」 (box) 可由四個層疊的 (nested) 區域所組成：該元素所包含的「內容」 (不論是單純的文字，或是其它元素) 形成最內層的區域，就是 content area (內容區) ，依序向外一層一層圍繞為 padding area, border area, margin area (補距區 - 邊線區 - 邊距區) 。
區與區之間可分別由 css 指定 padding, border, margin 特性 (property) 來改變相互的距離，而每種特性定義都有上下左右四向，可由版面設計者指定各不相同的距離 (說成是厚度、寬度也可以) ，當然也可以沒有距離，運用這樣的概念進而改變版面上整組 box 的尺寸及呈現。
由內向外四個區都各自有「四邊」形成緊鄰的框，標準的名稱依序為： ₪
- content edge or inner edge (內緣-圖中綠線)
- 具有寬 (
width) 及高 (height) 的 content area 四邊，與 padding area 交界處；四邊圍成的區域稱為 content box 。 - padding edge (補距外緣-圖中紅線)
- padding area 四邊，與 border area 交界處；四邊圍成的區域稱為 padding box 。
- border edge (邊線外緣-圖中藍線)
- border area 四邊，與 margin area 交界處；四邊圍成的區域稱為 border box 。
- margin edge or outer edge (框外緣-圖中深灰線)
- margin area 四邊，也是整個框 (box) 的最外緣；四邊圍成的區域稱為 margin box 。
對 margin box 來說，永遠呈現透明 (因此能看到其背後的內容)；在元素上定義背景 (background) 呈現在 border box, padding box, 及 content box 的區域內。而 content box 的「內容」當然是呈現在背景的前面。
- 參考資源
-
- CSS basic box model - w3c 官方文件 (英文) 。
散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。
CSS selectors語法(CSS教學) (3)
思考 - Box Model 與 css 版面視覺設計
Box 在版面編排上可以說是無所不在，就算「內容」 (content) 是單單一個字都具有 box，佔有一小塊矩形區域；當然，也能由 css 個別指定不同的
padding,border,margin。如果padding,border,margin的距離都是「零」，那麼當然， padding box, border box, margin box 的大小就會與 content box 所擁有的寬高一樣。許許多多字的 Box 就如同「堆積木」，一個個相鄰著由上而下堆疊起來 (書寫方向為由左向右、由上至下時)，將內容有規則地分布在版面上，而這個規則就是設計者以 css 定義的呈現方式。
行內層級 (inline-level) 與區塊層級 (block-level) 呈現模式不同
許多的「字」結合起來可以產生「段落」，段落則再形成更大的矩形 box ，將文字圍繞起來。
xhtml<p>看到竹子想到王陽明。看到桃花想到桃花源記。看到蓮花想到周敦頤。<em>看到荷花想到何仙姑。看到玫瑰想到愛神。看到菊花想到陶淵明。</em>看到百合想到香水。～節錄自 monica 「聯想的遊戲」
</p>
元素
p代表段落，一般以區塊層級 (block-level) 方式呈現，會是一個「獨立」的矩形 box ，可特別稱為 block boxes (圖中綠線) 。而p所包含的「內容」 (content) 可想像成，由「三節」行內層級 (inline-level) 或文字層級 (text-level) 的文字組成，三個行內層級元素 (inline-level emements) 當然都有自己的 box ，可特別稱為 inline boxes ，以一個個「自動緊接」的方式呈現，與 block boxes 圍成「一區」的矩形不盡相同。1 與 3 只是文字，屬於文字層級 (text-level) 元素，雖然有「自然產生」的 inline boxes ，不過由於沒有賦予特定的元素名稱，也可稱為「不具名 (anonymous) 元素」，所以無法經由 css selectors 為其指定
padding,border,margin等；而 2 因為已被指定成em元素 (行內層級元素) ，就可以由設計者定義。行內層級元素無法容納在一行內時， inline boxes 就會拆斷成二行或是數行，範例中的 em 元素就可能拆成二行或是三行的矩形框 (圖中藍線)，不再是標準的一塊矩形而已了。 inline boxes 的「左邊」在該元素第一行起始的左方，「右邊」在最末行結尾的右方，所以如果指定「左或右」的
padding,border,margin時，只會在第一行和最末行作用，不會在各分行的「拆斷處」產生；指定「上或下」會在各行產生 (當然，依據margin規則，定義「上或下」不會作用在「不可替換」行內元素 (non-replaced inline elements)) 。抽象的 line box 因 inline boxes 而產生
line box 像是抽屜，也像骨架一般，將行內元素分成一層一層「收納」，如前例 (圖中紅線)，一層放不下就會轉到下一層。通常會看到行與行之間其實會有些許的空隙，不只是「字」的高度而已，這就是 line box 這個抽屜的高度，並不是 inline box 的高度。所以，實際上 inline boxes 是存在於一行一行抽象的 line box 裡，而 line box 一行行疊成區塊層級元素 (如前例的
p) 。 line box 由上向下，一行緊鄰著一行，而且永遠不會相互重疊。line box 與前面所講的 box 不同， line box 是因行內元素所產生的抽象空間，只是區塊層級元素 (block-level elements) 的 box model 一部分而已，不是真實的元素，所以也不可能為其指定 box 的各項數值 (如
width,height,padding,border,margin等) 。 line box 的寬度根據其容納區 (containing block) 所決定，而高度則由 cssline-height或vertical-align的定義來決定。多重的 block boxes 像洋葱一層包著一層
實際上，每一個區塊層級元素 (block-level elements) ，必然會由另一個區塊層級元素包圍，根元素除外 (root element, html 文件指的就是
html元素) ，所以，許多個 block boxes 一層一層包圍起來時就好似洋葱的構造。xhtml<blockquote><h1>聯想的遊戲</h1>
<p>看到三國演義想到七俠五義。看到紅樓夢想到牡丹亭。看到山海經想到鏡花緣。看到芭蕉扇想到鐵扇公主。看到豬八戒想到沙悟淨。看到孫悟空想到如來佛。看到史記想到司馬遷。看到船想到孔明借箭。看到滿山秋色想到最愛的詩人王維。看到赤子純真一般的畫想到豐子愷。看到李叔同想到大護法夏丏尊。～節錄自 monica 「聯想的遊戲」</p>
</blockquote>
很明顯地，
h1,p,blockquote都是區塊層級元素。h1與p的「內容」 (content) 僅包含著行內層級的元素，就像前面一樣，兩者各自擁有矩形的 block box ，也都可以各自指定padding,border,margin(圖中紅線) 。而blockquote從外包圍著h1與p，h1與p成了blockquote的「內容」 (content) ；blockquote形成另一個 block box (圖中綠線) ，當然也可以指定 box 的各項數值。