CSS 排版詞條 3-17

盒模型Box Model

也常叫做：盒模型、箱子模型、Box Model

你可能會這樣說

跟 AI 說卡片寬 300px，做出來卻超出容器，因為邊框與內距都被往外加了，一層層疊起來版面就越歪。

網頁上每個元素都是一個箱子，由內而外分三層：內容、內距、邊框，外面再加外距。你設的寬度預設只指「內容」那一層，加上內距與邊框後，實際大小自然變胖。

業界慣例是把尺寸計算方式改成 border-box：設 300px 就真的是 300px，內距往內推，排版穩定很多。

跟 AI 合作時不用背術語，只要說「寬度要包含內距與邊框」，它就會幫你加上正確設定。

內容 300px

內距（padding）邊框粗細

內容＋內距＋邊框＝箱子的實際大小；改成 border-box 之後，指定多少就是多少，排版才不會越疊越歪。

圖 3-17　拉大內距與邊框，外層箱子跟著變胖——盒子是三層組成的。

中文就可以

幫我把整站的尺寸計算改成 border-box：
所有元素的寬高都要包含內距與邊框，我指定的尺寸就是最終尺寸。
順便檢查目前有沒有因為這個問題爆版的區塊，修完回報清單。
用一張 300px 寬、內距 24px、邊框 1px 的卡片示範給我驗證。