知识文章 · 编写日期 2026-11-04
9.1免费版代码宽度为何加上内边距就超了
在9.1免费版代码网页练习中，若显式使用content-box，width只规定内容区，左右padding和border还要另加。原创算例设width:240px、左右padding各20px、边框各2px，边框外沿宽为284px；改为border-box后，同样声明的240px包含内边距与边框，内容区则为196px。
本站“9.1免费版代码”是检索线索，本页提供原创CSS练习，不代表某个9.1产品的默认布局。只算没有变换、缩放和额外最小宽度干预的单个普通盒子，单位为CSS像素。
先确定尺子量的是哪一圈
内容区放文字或图片；padding是内容区到边框之间的留白；border围住它们；margin在边框外侧，与相邻布局保持距离。问“宽度是多少”时，要先说测量内容区还是边框外沿。
本页把两侧边框设为相同的2px、内边距各20px，并分别显式指定两种box-sizing。这样比较只改变宽度口径，不依赖某个框架或控件默认值。
content-box：在240之外继续相加
设width:240px，padding:20px，border:2px solid，box-sizing:content-box。横向内容为240，左右留白合计40，左右边框合计4，故外沿宽为240+40+4=284px。
如果容器可用内容宽恰好240px，这个子盒子的外沿就比它多44px。仅把文字缩短不会消除由这组尺寸声明产生的44px；先找清外沿组成，比反复试字号更直接。
border-box：240内部重新分配
保留相同width、padding与border，只改box-sizing:border-box。边框外沿为240px，先减两侧内边距40和边框4，剩下内容宽240−40−4=196px。
这没有取消留白，也没有让边框不存在，而是让它们占用既定外沿宽的一部分。内容空间变窄后，文字可能较早换行；“外沿不变”不等于“文字排版不变”。
margin与阴影不要塞进同一算式
两种box-sizing都不把margin计入width。若上述盒子左右各有10px外边距，水平占位还要另外考虑这20px；不能因为用了border-box就说全部空间一定只有240px。
阴影可以画到边框之外，但它不是本例padding或border的宽度。若看到的视觉边缘与开发者工具显示的盒尺寸不符，应分开检查阴影、变换及容器布局约束，不把所有外溢都归因于box-sizing。
做一次只改一个条件的检查
在原创空白练习页放两个相同的段落盒，明确列出width、padding、border、box-sizing和margin。打开浏览器盒模型信息，分别记录内容宽与边框外沿宽，再与本页算式比较。
若实际数值不同，先检查CSS是否被其他规则覆盖、是否有min-width、flex收缩或变换。本文算例解释基础口径，不保证复杂页面只改一条属性就能修复全部溢出。
动手核对
- 写出要测量的边界：本例取左右边框外沿。
- 确认实际生效的box-sizing、width、两侧padding与border。
- 按content-box相加或border-box相减，得到284外沿或196内容。
- 单独核对margin及其他布局约束，再做最小页面比较。
常见问题
border-box会把padding变成零吗？
不会。padding仍存在，只是被包含在声明的宽度之内。
240px的盒子为什么内容只剩196px？
在本例border-box中，240减左右padding共40与border共4，内容区为196px。
margin算在border-box里面吗？
不算。margin位于边框之外，需按具体布局另行考虑。
直接把所有盒子改为border-box就一定合适吗？
不一定。它会改变内容区分配，应结合现有布局和需要保留的尺寸检查，而非把它当作自动修复保证。
依据与延伸阅读
- CSS box-sizing属性（MDN，核验日期 2026-11-04）
支持content-box与border-box所包含的尺寸范围、两者均不包含margin；240/284/196为本站指定条件的演算。