盒模型
Box Model
中级通用盒模型（Box Model）是浏览器计算页面元素尺寸和占用空间的方式：内容外依次是内边距、边框和外边距。理解它能帮你判断为什么设了宽度的卡片仍会撑出容器，以及该从哪里调整。
你可能会说：「我给卡片设了固定宽度，又加了内边距，结果它把整排布局撑破了，怎么改？」
读之前建议先了解
动手看看一张商品卡片占多宽
从里到外：内容（蓝）→ 内边距（绿）→ 边框（黄）→ 外边距（橙）。外边距只拉开和别的元素的距离，不会让卡片本身变大。
content-box（浏览器默认）：width 只算内容区。实际宽度 = 260 + 左右内边距 + 左右边框，内边距一加大，卡片就可能撑出容器。
要点卡片设了宽度，为什么还会变宽？
- 1
从内容到外侧看四层空间
你可以把一张卡片看成四层：最里侧放文字和图片，往外是内边距、边框、外边距。内边距让内容离边框远一点；外边距则把卡片和相邻元素隔开。
- 2
先弄清宽度算到哪一层
默认情况下，CSS 的 width 只指定内容区域的宽度。你再加左右内边距和边框，卡片本身就会比 width 更宽。如果设置 box-sizing 为 border-box，指定的宽度就包含内边距和边框。
- 3
排查时分清是哪层在占位
后台列表里的卡片挤不下一行时，我们先看内容、内边距和边框加起来有多宽，再看外边距是否推开了邻居。这样比反复缩小 width 更容易找到原因。
容易混淆的地方
盒模型解释的是单个元素的空间怎样计算；弹性布局和网格布局决定多个元素怎样排列。比如三张卡片要自动分列，先看布局方式；卡片设了宽度却仍然放不下，再查盒模型。外边距属于盒模型，但容器的 gap 是另一种控制元素间隔的方式。
什么时候用
适合用
- 做商品卡片时，设了宽度又加内边距，结果一行放不下；用盒模型核对卡片实际占用的空间。
- 做表单输入框时，发现加粗边框后控件变宽；用盒模型判断尺寸变化来自哪一层。
- 让 AI 调整按钮的点击区域时，说明要增加内边距，而不是只把按钮推离旁边的文字。
不适合用
- 想让卡片随屏幕宽度自动变成两列或三列，核心是网格布局和响应式规则，不是盒模型。
- 想给一整排卡片设置统一间隔，优先用布局容器的 gap，比逐张调整外边距更直接。
- 想让提示面板浮在按钮上方且不挤开正文，要处理定位和层级，盒模型不决定元素怎样叠放。
练一练选一个答案，看看解释
你让 AI 做一个宽 240 像素的侧栏卡片。它设置了 width: 240px，又加了左右各 16 像素的内边距，卡片因此比预期宽。哪种修改最符合“卡片本身保持 240 像素宽”的需求？
让 AI 帮你做复制给 AI Agent 直接用
请检查侧栏卡片的盒模型：卡片本身要保持 240 像素宽，并保留现有内边距。找出当前宽度被撑大的原因，优先用 box-sizing: border-box 修正，同时确认外边距不会让它挤出侧栏。