盒模型描述網頁元素會占用多少空間。它就像一幅裱框的畫:畫在中間,襯紙圍在周圍,邊框包住外緣,空白牆面則將它與其他畫隔開。

在網頁的方框中,內容位於內距之內,外面是邊框,外距則在最外層。這些層會影響元素看起來有多大,以及它與相鄰元素的距離。

了解這些層有助於解釋為什麼卡片占用的空間會大於其中的圖片或文字。調整正確的層,就能改變內部留白或與其他項目的間距。