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