原文链接用一个登录卡片讲清 CSS 盒模型padding、border 与 box-sizing 到底如何影响布局登录卡片是理解 CSS 盒模型的好例子它既有固定宽度的外框也有需要撑满可用空间的输入框和按钮。很多布局问题都长得像这样明明给输入框写了width: 100%为什么它还是比容器更宽答案通常不在 Flexbox 或 Grid而在盒模型你设置的width到底是在约束内容区还是在约束包含边框的外框本文只围绕一个登录卡片弄清四件事padding、border、margin分别位于哪里默认的content-box如何计算尺寸border-box改变了什么又没有改变什么为什么表单控件配合width: 100%时通常需要明确盒模型规则。先看问题width: 100%为什么还能变宽假设登录卡片中有输入框div classlogin-card h1欢迎回来/h1 label classfield span账号/span input typetext placeholdernameexample.com / /label label classfield span密码/span input typepassword placeholder输入密码 / /label button typebutton登录/button /div先故意使用content-box.login-card { box-sizing: content-box; width: 320px; padding: 24px; border: 1px solid #d9e0ea; border-radius: 12px; } .field { display: block; margin-top: 16px; } .field input, .login-card button { box-sizing: content-box; width: 100%; padding: 12px; border: 1px solid #aeb9c8; border-radius: 8px; }这里的关键是在content-box下width: 100%只约束内容区。.login-card的内容区宽度是320px。输入框的百分比宽度以其包含块的内容区为基准因此输入框内容区也是320px。加上左右内边距和边框后输入框的边框盒宽度为320px内容区 12px左 padding 12px右 padding 1px左 border 1px右 border 346px也就是说输入框相对于卡片的320px内容区多出了26px。它会先占用卡片右侧的部分 padding如果父元素的空间不足或存在其他约束便可能越过卡片边框形成横向溢出。这就是“width: 100%却没有刚好填满”的根源100% 不一定指元素最终外框的 100%。登录卡片的四层content、padding、border、margin一个普通块级盒子可以从内到外理解为四层content box内容区标题、文字、表单内容实际放置的区域在默认盒模型下width和height描述的就是它。padding内边距内容与边框之间的留白。登录卡片的padding: 24px就是让表单不要紧贴卡片边线。border边框围住 padding 的可见边线例如1px solid #d9e0ea。margin外边距位于边框之外用于拉开卡片与页面或相邻组件之间的距离。要特别区分两件事padding是卡片内部的留白margin是卡片外部与其他元素的间距。从盒模型结构看margin 位于 border 之外。它会影响元素在页面排布时占用的外部空间但不属于元素的 border box也不属于卡片自身带边框的可见外框。默认规则content-box会把 padding 和 border 加到外面box-sizing的初始值是box-sizing: content-box;在这个规则下声明的width和height对应内容区padding 与 border 会额外增加到最终的 border box 尺寸上。继续使用登录卡片的数字.login-card { box-sizing: content-box; width: 320px; padding-inline: 24px; border-inline: 1px solid #d9e0ea; }它的尺寸关系是声明 width320px 内容区宽度320px 最终 border box 宽度 320 24 24 1 1 370px因此width: 320px并不等于“你在屏幕上看到的卡片边框外沿是 320px 宽”。在content-box下它表示卡片内部可放内容的区域为 320px 宽。如果再写margin-inline: auto; margin-top: 48px;这些 margin 不会计入上面的370pxborder box 宽度但它们会影响卡片与页面边缘、其他组件之间的距离。需要注意的是margin-inline: auto的实际分配效果还取决于包含块是否存在可分配的剩余空间。换成border-box320px 就是卡片的边框盒宽度现在只改一行.login-card { box-sizing: border-box; width: 320px; padding-inline: 24px; border-inline: 1px solid #d9e0ea; }在border-box下width包含content 左右 padding 左右 border所以这次声明 width320px 最终 border box 宽度320px 内容区宽度 320 - 24 - 24 - 1 - 1 270px也就是说border-box不是让 padding 和 border 消失而是把它们纳入已经声明的尺寸预算。为了容纳内边距和边框内容区会相应缩小。这也是为什么做固定宽度卡片时很多人更喜欢border-box当你写width: 320px在没有其他尺寸约束介入时卡片的 border box 宽度就是320px。同一个输入框两种计算方式下面把输入框单独拿出来比较。假设它所在包含块的内容区宽度为270px。情况一输入框使用content-boxinput { box-sizing: content-box; width: 100%; padding-inline: 12px; border: 1px solid #aeb9c8; }计算结果width: 100% → 内容区为 270px 最终 border box 宽度 270 12 12 1 1 296px输入框的边框盒宽度比可用内容区域多26px。它可能先占用父元素右侧的 paddingpadding 不够时就会越过父元素的边框区域。情况二输入框使用border-boxinput { box-sizing: border-box; width: 100%; padding-inline: 12px; border: 1px solid #aeb9c8; }计算结果width: 100% → border box 为 270px 内容区宽度 270 - 12 - 12 - 1 - 1 244px这次输入框的外框刚好是270px与父元素的可用内容宽度对齐。对于“卡片内表单控件占满一行”这种常见需求border-box通常更符合直觉。百分比宽度以包含块的相应尺寸为基准解析而box-sizing决定声明的宽度最终应用于 content box 还是 border box。一份可运行的登录卡片对比代码下面的示例把两种盒模型并排展示。两张卡片的 CSS 声明宽度都为320px但最终边框盒宽度和内部控件表现不同。div classlogin-demos section classlogin-card content-demo h2content-box/h2 label classfield span账号/span input typetext placeholdernameexample.com / /label label classfield span密码/span input typepassword placeholder输入密码 / /label button typebutton登录/button /section section classlogin-card border-demo h2border-box/h2 label classfield span账号/span input typetext placeholdernameexample.com / /label label classfield span密码/span input typepassword placeholder输入密码 / /label button typebutton登录/button /section /div.login-demos { display: flex; flex-wrap: wrap; gap: 32px; padding: 32px; background: #f5f7fb; } .login-card { width: 320px; padding: 24px; border: 1px solid #d9e0ea; border-radius: 12px; background: #fff; font: 14px/1.5 system-ui, sans-serif; } .content-demo { box-sizing: content-box; } .border-demo { box-sizing: border-box; } .field { display: block; margin-top: 16px; } .field span { display: block; margin-bottom: 6px; } /* 故意保留 content-box观察 width: 100% 的额外尺寸 */ .login-card input, .login-card button { box-sizing: content-box; display: block; width: 100%; padding: 12px; border: 1px solid #aeb9c8; border-radius: 8px; font: inherit; } .login-card button { margin-top: 20px; cursor: pointer; color: #fff; border-color: #2563eb; background: #2563eb; } /* 推荐修复让控件以 border box 对齐可用宽度 */ .border-demo input, .border-demo button { box-sizing: border-box; }观察时注意两点.content-demo的width: 320px指内容区因此它的 border box 宽度实际为370px.border-demo的width: 320px指 border box而其中的输入框和按钮也使用border-box所以width: 100%对应它们完整的 border box 宽度。不要把问题简单归因于“输入框有 padding”。真正决定结果的是padding 和 border 是否被包含在声明宽度之内。height也遵循同一套规则宽度如此高度也是如此input { height: 44px; padding-block: 12px; border: 1px solid; }在content-box下height: 44px是内容区高度最终边框盒高度还要加上上下 padding 和上下 border在border-box下44px是输入框包含边框在内的 border box 高度内容区会被扣减。不过表单控件的视觉高度不只由box-sizing决定。文字的line-height、字体、浏览器默认样式以及原生控件的渲染方式都可能影响最终观感。做精确表单 UI 时建议显式设置font、line-height、padding、border和box-sizing不要完全依赖浏览器默认外观。虽然box-sizing的初始值是content-box但浏览器的用户代理样式表可能会为部分表单控件或特定input类型设置border-box实际项目中应以 DevTools 的计算后样式为准。实战推荐统一采用可继承的border-box项目中常见的基础规则是html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }它的作用是让页面元素默认使用border-box让伪元素::before、::after也遵循同一规则在固定宽度、百分比宽度的卡片、输入框、按钮中减少“还要手工减去 padding 和 border”的计算保留局部覆盖的余地某个特殊组件仍可以单独写box-sizing: content-box。但它不会做以下事情不会把margin计入width或height不会自动分配 Flexbox 或 Grid 中的剩余空间不会修复由min-width、长文本、不换行内容或绝对定位造成的所有溢出不会消除 padding、border只会改变它们参与尺寸计算的方式。用 DevTools 验证而不是靠猜当你发现登录卡片尺寸不对时可以在浏览器开发者工具中检查目标元素选中卡片、输入框或按钮打开样式面板确认实际生效的box-sizing查看 Box Model 图分别检查 content、padding、border、margin 的数值对比声明的width与实际 border box 宽度临时切换content-box和border-box观察内容区与外框如何变化。这比盲目给元素加overflow: hidden、减少宽度或删除 padding 更可靠。结论把width理解成一份尺寸预算用登录卡片记住下面这组判断即可padding内容到边框的内部留白border卡片或控件的可见边线margin元素与外界的距离不属于 border boxcontent-boxwidth只给内容区padding 和 border 额外增加border-boxwidth给 border boxpadding 和 border 从中扣除width: 100%并不天然表示“最终外框刚好占满 100%”还要看元素的box-sizing对登录卡片、输入框、按钮这类强调对齐的 UI统一采用border-box往往更容易控制布局。当你下一次看到“输入框明明是 100%却把卡片撑宽了”先不要怀疑布局系统。先问一句这 100% 指的是 content box还是 border box参考资料CSS Box Sizing Module Level 3W3CCSS Box Model Module Level 3W3Cbox-sizingMDN Web DocsThe box modelMDN Web Docs