Box Model 是視覺性呈現的重要基礎
只要有內容在版面上描繪 (可以把版面想成一張空白的紙) ，就一定會佔有版面上某些空間，縱使是一個字，也至少就佔了一個字的矩形區域，而這樣的區域被定義為 boxes (盒框) 。
html 每一個具顯出性的元素就擁有一組 box ，是由四個部分、不可拆離的 box 所產生。
3D 透視演示
歸去來兮！田園將蕪胡不歸？既自以心爲形役，奚惆悵而獨悲？悟已往之不諫，知來者之可追；實迷途其未遠，覺今是而昨非。
舟搖搖以輕殤，風飄飄而吹衣。問征夫以前路，恨晨光之熹微。乃瞻衡宇，栽欣載奔。童僕歡迎，稚子候門。三徑就荒，松菊尤存。攜幼入室，有酒盈樽。引壺觴以自酌，眇庭柯以怡顔。倚南窗以寄傲，審容膝之易安。園日涉以成趣，門雖設而常關。策扶老以流憩，時翹首而遐觀。雲無心以出岫，鳥倦飛而知還。景翳翳以將入，撫孤松而盤桓。
歸去來兮，請息交以絕遊。世與我而相遺，複駕言兮焉求？悅親戚之情話，樂琴書以消憂。農人告餘以春兮，將有事乎西疇。或命巾車，或棹孤舟。既窈窕以尋壑，亦崎嶇而經丘。木欣欣以向榮，泉涓涓而始流。羨萬物之得時，感吾生之行休。
已矣乎！寓形宇內複幾時？何不委心任去留？胡爲惶惶欲何之？富貴非吾願，帝鄉不可期。懷良辰以孤往，或執杖而耘耔。登東坳以舒嘯，臨清流而賦詩。聊乘化以歸盡，樂夫天命複奚疑？
歸去來辭 ~ 陶淵明
- 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 。
明月幾時有，把酒問青天，不知天上宮闕，今夕是何年。我欲乘風歸去，唯恐瓊樓玉宇，高處不勝寒；起舞弄清影，何似在人間。轉朱閣，低綺戶，照無眠；不應有恨，何事長向別時圓。人有悲歡離合，月有陰晴圓缺，此事古難全；但願人長久，千里共嬋娟。 ~ 蘇軾 水調歌頭 (明月幾時有)
一個段落 <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 。