Box Model 是視覺性呈現的重要基礎

只要有內容在版面上描繪 (可以把版面想成一張空白的紙) ,就一定會佔有版面上某些空間,縱使是一個字,也至少就佔了一個字的矩形區域,而這樣的區域被定義為 boxes (盒框) 。

html 每一個具顯出性的元素就擁有一組 box ,是由四個部分、不可拆離的 box 所產生。

3D 透視演示

margin box
border box
padding box
content box

歸去來兮!田園將蕪胡不歸?既自以心爲形役,奚惆悵而獨悲?悟已往之不諫,知來者之可追;實迷途其未遠,覺今是而昨非。

舟搖搖以輕殤,風飄飄而吹衣。問征夫以前路,恨晨光之熹微。乃瞻衡宇,栽欣載奔。童僕歡迎,稚子候門。三徑就荒,松菊尤存。攜幼入室,有酒盈樽。引壺觴以自酌,眇庭柯以怡顔。倚南窗以寄傲,審容膝之易安。園日涉以成趣,門雖設而常關。策扶老以流憩,時翹首而遐觀。雲無心以出岫,鳥倦飛而知還。景翳翳以將入,撫孤松而盤桓。

歸去來兮,請息交以絕遊。世與我而相遺,複駕言兮焉求?悅親戚之情話,樂琴書以消憂。農人告餘以春兮,將有事乎西疇。或命巾車,或棹孤舟。既窈窕以尋壑,亦崎嶇而經丘。木欣欣以向榮,泉涓涓而始流。羨萬物之得時,感吾生之行休。

已矣乎!寓形宇內複幾時?何不委心任去留?胡爲惶惶欲何之?富貴非吾願,帝鄉不可期。懷良辰以孤往,或執杖而耘耔。登東坳以舒嘯,臨清流而賦詩。聊乘化以歸盡,樂夫天命複奚疑?

歸去來辭 ~ 陶淵明

content box

元素所含有實際內容的區域,包括其內層元素。此 box 通常是其內層元素的容納區 (containing block) 的形成基準。

padding box

可在 content box 邊緣之外,及 border box 區以內產生留空區域。部分元素瀏覽器會賦予初值,也很多元素 padding 初值為 0 。

border box

可在 padding box 邊緣之外,及 margin box 區以內產生厚度區域,並在此區可上色 (前景模式,會覆蓋背景之上) 。除了填滿色,還可有特別上色形式,如圓點、間隔等非填滿色、或產生浮凸視覺、亦可利用圖片覆蓋。少數元素瀏覽器會賦予初值,大部分元素 border 沒有初值。

margin box

可產生 border box 的外緣與其它物件的間距。產生的間距區域理當是透明,如同看不見的空氣,不會有本身的背景。接受負值的逆距。部分元素瀏覽器會賦予初值,大部分元素 margin 初值為 0 。

block box and inline box

block-level box

形成一塊標準的矩形 box ,常用到的 block-level 元素就是明顯的例子,如,一個段落 <p> 元素。

inline-level box

可形成多重的矩形 box ,如,一串文字超過一行的寬度,會切斷分至下行,此時矩形就會另再形成 (如例示 1) 。也因此文字水平 (text-level : a type of inline-level) 的 box 無法如一般矩形有明確的寬度、高度,也就是沒有成型的寬高可言。實際上,任何一個字、一幅圖、一部影片都歸屬於 inline-level

【例示 1】

明月幾時有,把酒問青天,不知天上宮闕,今夕是何年。我欲乘風歸去,唯恐瓊樓玉宇,高處不勝寒;起舞弄清影,何似在人間。轉朱閣,低綺戶,照無眠;不應有恨,何事長向別時圓。人有悲歡離合,月有陰晴圓缺,此事古難全;但願人長久,千里共嬋娟。 ~ 蘇軾 水調歌頭 (明月幾時有)

一個段落 <p> 裡,有一小段內容以 <b> 元素圍繞,當一行不足以容下此段時,就會切至下一行,或可能下幾行。加上 padding, margin, or border 不會造成行的高度變化而混亂,以維持文本原來的編排。

block box 的尺寸初值通常為 auto

絕大多數 block-level 元素的 box 寬高尺寸初值為 auto 。 (以左向右、上往下書寫方式為例) 寬度 width: auto 會自動延展至其容納區 (containing block) 寬度,並隨之縮放,這帶來很大的方便,瀏覽器不像印刷紙張有已知的尺寸,可以預先設定,每個使用者的視區大小不會相同,創作者無從預先指定好尺寸,自動縮放的寬度就可確保內容不會溢出,而且大多都已經由瀏覽器預先設定好了。高度 height: auto 也是基於此目的,但依據其包含的內容來延展高度,不是容納區,這跟一般印刷排版沒什麼不同。寬高尺寸通常指的是 content box 的尺寸,可以透過 box-sizing 指定成 border box