HTML标签对不齐的根源是display类型、基线（baseline）和布局上下文不统一；label与input错位因默认inline与replaced元素按baseline对齐位置不同；解法优先用flex布局配合align-items: center。
HTML 标签之间“看起来没间距”或“对不齐”，绝大多数时候不是缺 margin 或 padding，而是 display 类型、基线（baseline）和布局上下文没统一。直接加样式容易白忙活。
label 和 input 垂直对齐失效的真正原因
浏览器默认把 <label> 当作 inline 元素，把 <input> 当作替换元素（replaced element），两者按 baseline 对齐——但 label 的 baseline 在文字底部，input 的 baseline 实际在框体中间偏下位置，天然错位。
- 常见错误现象：
label { padding-bottom: 20px; }写了，DevTools 里能看到 padding 区域，但<input>位置完全不动 - 根本解法：先让
<label>支持高度控制，必须设display: inline-block或display: block - 若用
inline-block，务必配vertical-align: middle；若用block，记得给label设width，否则长文本撑宽、短文本左右不对齐 - 更推荐方案：用
display: flex包裹每组<label><input>，一句align-items: center就稳了
表格单元格内按钮挤成一团怎么破
<button> 直接塞进 <td> 默认是 baseline 对齐、无间距、贴左上角——这不是 bug，是浏览器默认行为。靠给按钮加 margin-right 很难收效，因为父级 <td> 的 vertical-align 和 padding 没调好。
- 第一步：给
<td>设padding: 8px提供呼吸空间，再设vertical-align: middle让按钮“站稳” - 第二步：按钮组外层套一个
<div class="btn-group">，设display: flex+gap: 4px控制间距（比手动写margin-right更可靠，且自动处理最后一项） - 第三步：统一按钮高度，必须设
box-sizing: border-box+ 固定height+line-height，否则跨浏览器或混用图标时高低不一 - 避免用
float或position: relative微调——会破坏表格行高一致性，尤其在动态数据渲染时容易露馅
table 自身居中与单元格间距设置
<table> 默认是块级元素，但它的对齐和内部间距机制和普通 div 不同，不能只靠 margin: 0 auto 或 text-align 解决所有问题。
立即学习“前端免费学习笔记（深入）”；
- 让整个表格水平居中：用
margin: 0 auto（需确保<table>没被float或position: absolute干扰） - 旧属性
cellspacing已废弃，应改用 CSS 的border-spacing控制单元格间距，例如table { border-spacing: 0 8px; }（分别控制水平/垂直间距） - 表格左右对齐不要用
align属性（HTML4 遗留），改用float: left/float: right或margin-left: auto/margin-right: auto - 如果表格内容要右对齐，优先在
<td>或<th>上设text-align: right，而不是动<table>本身
flex 布局中 justify-content 和 align-items 的实际作用域
这两个属性只在 display: flex 或 display: inline-flex 的容器上生效，且作用轴向固定：主轴（默认水平）由 justify-content 控制，交叉轴（默认垂直）由 align-items 控制。很多人误以为它们能“全局居中”，其实只管直接子元素。
-
justify-content: center是让子元素在主轴（比如横向）上居中排列，不是让容器自己居中 -
align-items: center是让所有子元素在交叉轴（比如纵向）上居中对齐，前提是父容器有明确高度，或子元素高度可计算 - 如果子元素是文字或
<span>这类行内元素，还需确认父容器没被意外的line-height或font-size干扰视觉位置 - 响应式场景下，
gap比margin更可控，但注意 Safari 旧版本不支持gap，必要时用margin降级
最常被忽略的一点：所有对齐问题，本质都是 layout context 不一致导致的。与其逐个调 margin 和 padding，不如先确认 display 类型、基线行为、父容器约束这三层是否统一——尤其是 vertical-align 只对 inline / inline-block / table-cell 生效，这点很容易漏掉。
