元素视觉尺寸大于设置值，主要因 content-box 盒模型下 width/height 不含 padding 和 border；改用 border-box 可使宽高包含内边距和边框；margin 不增加自身占位但影响间距，需注意外边距合并与溢出问题。
元素看起来比实际占位大，通常是因为 边框（border）、内边距（padding） 和 外边距（margin） 被默认计入了视觉尺寸，但布局计算方式不同。关键在于理解 CSS 的 盒模型（box model） —— 它决定了“内容区”和“占位空间”如何分离。
区分 content-box 与 border-box
CSS 默认使用 content-box 盒模型：设置的 width/height 仅指内容区大小，不包含 padding 和 border。这意味着：
- width: 200px; padding: 10px; border: 2px solid #000; → 实际占位宽度 = 200 + 10×2 + 2×2 = 224px
- 元素在页面中“撑开”的空间，往往比你写的 width 大，容易导致布局错位或溢出
更直观的做法是统一改用 border-box：
* {box-sizing: border-box;}此时 width/height 指的是“整个盒子的总宽高”，padding 和 border 都向内压缩内容区，视觉大小与设置值基本一致。
立即学习 “ 前端免费学习笔记（深入）”；
外边距（margin）不影响自身占位，但影响相邻元素
margin 是盒子外部的透明区域，它 不增加自身元素的 width/height 占位，但会改变它与其他元素之间的距离，可能造成“看起来没对齐”或“空白异常”：
- 两个 margin-bottom: 20px; 的块级元素，垂直间距不是 40px，而是发生 外边距合并（margin collapse），最终只显示 20px
- 父容器没有 border/padding，子元素的 top/bottom margin 可能“溢出”到父容器外，导致父容器高度塌陷
解决方法：给父容器加 overflow: hidden; 或 border: 1px solid transparent; 可阻止 margin 溢出；需要精确间距时，优先用 padding 替代 margin。
检查真实尺寸：用 浏览器 开发者 工具 验证
不要凭感觉判断大小。在 Chrome/Firefox 中右键元素 →“检查”，在右侧“Computed”面板里查看：
- width / height：当前生效的内容区尺寸
- padding / border / margin：各方向具体值
- size 栏直观显示“总占用区域”（含 padding + border），以及“外边界”（含 margin）
勾选“Show layout shifts”或启用“Box Model”可视化图层，能立刻看清 content/padding/border/margin 四层嵌套关系。
响应式场景下特别注意字体、行高带来的视觉偏差
文字内容的视觉高度 ≠ 元素 height 设置值。例如：
- font-size: 16px; line-height: 1.5; → 实际单行文字高度约 24px，若容器 height 设为 16px，文字会被截断或溢出
- 图标字体（如 Font Awesome）或 SVG 图标，其 baseline 对齐、vertical-align 默认值也会让容器“看起来偏高”
建议：对文字容器，优先用 min-height 代替固定 height；需要居中时，用 flexbox 或 line-height = height（仅限单行）更可靠。
