元素实际宽度大于设定值是因默认 content-box 盒模型将 padding 和 border 计入总宽；改用 border-box 可使 width 包含 padding 与 border，推荐全局设置 * { box-sizing: border-box; }。
元素实际显示宽度比设定值大，通常是因为 padding 和 border 默认被加在 width 之外，导致总宽度 = width + padding × 2 + border × 2。
检查并确认当前盒模型行为
默认情况下，CSS 使用的是 content-box 盒模型。比如设了 width: 200px; padding: 10px; border: 2px solid #000;，元素实际占宽就是 200 + 20 + 4 = 224px。
- 用浏览器开发者工具（F12）选中元素，在“Computed”面板查看 box-sizing 值
- 观察“Layout”或“Box Model”视图，直观看到 content、padding、border 各自占用的空间
统一使用 border-box 消除尺寸偏差
把盒模型设为 border-box 后，width 就代表元素的**总宽度**（含 padding 和 border），更符合直觉和设计稿需求。
- 全局设置（推荐）：
* { box-sizing: border-box; } - 局部设置：
.my-input { width: 200px; padding: 12px; border: 1px solid #ccc; box-sizing: border-box; }
注意 margin 不影响 width，但会影响布局位置
margin 是盒子外部的空白，不会让元素“变宽”，但可能造成相邻元素间距异常、换行或溢出。若发现元素“撑开容器”或错位，也要顺手检查 margin 是否多余或未重置。
立即学习“前端免费学习笔记（深入）”；
- 常见问题：父容器有固定宽度，子元素带 margin-right 导致横向溢出
- 建议：需要内边距时优先用 padding；外边距只用于控制与其他元素的距离
基本上就这些。改用 box-sizing: border-box 并养成检查 padding/border 的习惯，能避免绝大多数“明明设了 100px 却看起来不止”的问题。
