盒模型Box Model
你可能会说
这个卡片明明设为 320px，为什么加了内边距后反而挤出容器？
由内容、内边距、边框和外边距构成的网页元素几何尺寸与排版占位规则。例如卡片内容宽 320px，再加左右内边距和边框，实际占用宽度可能更大，导致两列排不下；按钮的可点击区域也受这些层次影响。它解释尺寸怎样算，不负责内容超出后该显示、裁切还是滚动。
先知道
也常被叫作盒模型盒子模型box-sizing
一张卡片的 320px 到底包含什么
box-sizing: content-box;width: 320px;0370px
内容 320
320 + 24×2 + 1×2= 370px
空间怎样从里到外计算
内容不是全部宽度：内容区装文字和图片；内边距在内容周围设置内侧留白，边框包住它们，外边距再使当前元素与相邻元素保持设定的外部距离。
布局看实际占用：当多个元素并排时，浏览器要计算它们实际占多少空间。检查开发者工具中的盒模型，才能知道挤出的是内容、padding、border 还是 margin。
你可以这样告诉 AI Agent
请检查这两列卡片的盒模型，说明内容宽度、padding、border 和 margin 各占多少。桌面上保持两列，390px 时不能横向溢出；改完后用开发者工具确认实际尺寸。
接下来学什么
延伸阅读 · 权威出处
快速练习