label和input垂直对齐不齐是因为默认baseline对齐不一致；加padding-bottom无效因label是inline元素，需设display:inline-block+vertical-align:middle或改用flex布局。
label 和 input 垂直对齐不齐，加 padding-bottom 没反应
这是因为 label 默认是 inline 元素，它的 padding-top 和 padding-bottom 虽然渲染可见（尤其加了背景或边框时），但不会推开下方的 input——后者按基线（baseline）贴着文字底部对齐，视觉上就“压在一起”了。
必须先让 label 支持高度控制：
- 加
display: inline-block，再配vertical-align: middle（不加这个仍可能错位） - 或改用
display: block，但记得设width，否则长文本撑宽、短文本对不齐 - 更现代的做法：把包裹
label和input的容器设为display: flex，用align-items: center一并解决对齐和间距
表单元素之间垂直间距太小，margin-bottom 不生效
常见于连续多个 label+input 块堆叠时，看起来挤成一团。问题往往不是没写 margin-bottom，而是外边距合并（margin collapse）在作祟：两个相邻块级元素的上下 margin 会取较大值，而非相加。
实操建议：
- 给每个
label或其父容器（如div.form-row）加margin-bottom，但避免同时给input加margin-top - 用
padding-bottom替代——作用在父容器上，完全避开合并问题 - 启用
display: flex; flex-direction: column;，再用gap控制间距，gap不受 margin 合并影响，且语义清晰
表格中单元格间距混乱，cellspacing 还能用吗
cellspacing 是 HTML4 的遗留属性，已废弃。它只能统一设置所有单元格间距，无法差异化控制，也不支持响应式或继承链管理。
现代替代方案明确：
- 用
border-collapse: separate+border-spacing: 8px替代cellspacing（注意：只对table生效） - 用
padding替代cellpadding，直接加在td或th上，可单独设置不同方向 - 若需某列特殊间距，
border-spacing不支持，得靠padding配合类名（如.col-actions td { padding-left: 24px; }）
按钮组在表格里右对齐，结果整行文字都右偏了
很多人直接给 td 加 text-align: right，但 text-align 是继承属性，会影响该单元格内所有内联内容（包括普通文字），造成对齐污染。
正确做法是隔离作用域：
- 把按钮包进一个
div，比如<div class="btn-group"><button>保存</button></div> - 只对
.btn-group设text-align: right，不影响同单元格其他内容 - 若按钮需等高对齐，给按钮加
box-sizing: border-box+ 显式height或min-height，并统一line-height（比如line-height: 32px），避免依赖vertical-align: bottom引发的错位
真正容易被忽略的是：很多间距问题本质不是“缺样式”，而是 display 类型错配、基线对齐逻辑被默认行为覆盖、或者 margin 合并这类隐性机制没被识别。调样式前，先看一眼 DevTools 里的 computed display 和 vertical-align 值，比盲目加 margin 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
