box-sizing 影响 padding 和 margin 的实际效果：默认 content-box 下 padding 撑大总宽高，margin 始终作用于外部；vertical-align 仅对 inline、inline-block 或表格单元格生效，不适用于块级文本对齐。
box-sizing 影响 padding 和 margin 的实际效果
默认 box-sizing: content-box 时，padding 会撑大元素的总宽高，而 margin 始终在外部起作用。如果你发现加了 padding: 10px 后文本离边框还是太近，很可能是因为父容器或字体本身的 line-height、font-size 导致视觉错位，而不是 padding 没生效。
建议统一设置：
*, *::before, *::after { box-sizing: border-box; }这样所有 padding 都计入宽高，调整更可预期。
vertical-align 不适用于块级文本对齐
vertical-align 只对 inline、inline-block 或表格单元格（td）生效，对 div 里直接写的段落文本无效。常见误用是给 div 加 vertical-align: middle，结果毫无反应。
真正控制块内文本垂直居中，优先考虑：
- 单行文本：用
height+line-height相等 - 多行文本：用
display: flex+align-items: center - 老项目兼容 IE：用
display: table-cell+vertical-align: middle
padding 和 margin 在文本对齐中的分工
padding 调整的是「内容区到边框」的距离，直接影响文本与容器内壁的间隙；margin 调整的是「整个盒子到其他盒子」的距离，不改变文本在本容器内的位置。
立即学习“前端免费学习笔记（深入）”；
例如让按钮文字上下居中且整体下移一点：
button { padding: 8px 16px; /* 控制文字离上下边框距离 */ margin-bottom: 4px; /* 让按钮整体和下面元素拉开距离 */ }如果误把 margin-bottom 写成 padding-bottom，会导致按钮变高、文字反而被顶高，视觉上更不居中。
font-family 和 line-height 造成的“对不齐”假象
很多看似 padding 没起作用的情况，其实是字体本身的上升高度（ascent）和下降深度（descent）导致的。比如 font-family: "Helvetica", sans-serif 和 "PingFang SC", "microsoft YaHei" 的基线表现差异很大。
调试技巧：
- 临时加
outline: 1px solid red查看真实盒模型边界 - 用浏览器开发者工具勾选「Show layout shifts」观察基线位置
- 对齐要求高时，用
line-height: 1.2替代line-height: normal，避免字体间差异放大
最常被忽略的一点：padding 和 margin 能调位置，但调不准——因为它们不感知文本基线。真要像素级对齐，得结合 transform: translateY() 或 flex 的 align-items 精控。