HTML标签间间隙主因是换行符和空格被解析为文本节点，导致inline/inline-block元素（如button、input）出现几像素水平缝隙；根本解法包括：写成一行、父容器设font-size:0再恢复子元素字号，或用display:flex+align-items:center一劳永逸对齐。
HTML标签之间出现“对齐间隙”，绝大多数情况不是样式没写对，而是浏览器把换行符和空格当作了文本节点来渲染——尤其当元素是 inline 或 inline-block 时（比如 button、input、li、span）。
为什么 button 和 input 挨不紧
你在 HTML 里这么写：
<input type="text"><br><button>提交</button>
换行本身就会生成一个空格字符（U+0020），被当作 inline 元素间的空白符渲染出来，造成几像素水平缝隙。即使你写了 margin: 0、padding: 0，也压不住它。
- 最稳的现场解法：把两个标签写在同一行，中间不留任何空白 ——
</input> - 更通用且可维护：父容器设
font-size: 0，再单独给子元素恢复字号，例如.search-box { font-size: 0; } .search-box > * { font-size: 14px; } - 别用
float清除这个间隙，它会让元素脱离文档流，后续布局容易失控
用 display: flex 一劳永逸对齐
放弃折腾 vertical-align 和 line-height，直接用 Flexbox 管理父容器。
- 父容器加
display: flex; align-items: center;，子元素自动垂直居中 - 注意 HTML 顺序：
button放input前面，才能实现「按钮在左、输入框在右」的常见布局 - 避免给
input或button单独设float、vertical-align或margin-top，这些会和flex行为冲突 - 如需等宽拉伸（如搜索框占满容器），给
input加flex: 1，button保持自然宽度
label 和 input 对不齐的真正原因
label 默认是 inline 元素，它的 padding-bottom 不会推开下方的 input——因为 input 是按基线（baseline）对齐的，而两者的 baseline 天然不在同一高度。
- 必须先让
label支持高度控制：加display: inline-block或display: block - 若用
inline-block，一定要配vertical-align: middle，否则仍可能错位 - 最稳解法是统一用
flex容器包裹每组：div.form-row { display: flex; align-items: center; } -
align-items: center比vertical-align: middle更可靠，后者在非inline/inline-block场景下无效
动态插入 HTML 时也要防间隙
用 jQuery 的 .html() 插入字符串时，如果字符串含换行或空格（比如模板字符串里写了多行），照样会生成文本节点，导致间隙重现。
- 确保 HTML 字符串零空白：直接拼紧凑字符串，例如
`` - 若用
$().appendTo()创建 DOM，jQuery 解析过程可能保留空白行为，结果不稳定，不推荐 - 构建阶段做 HTML 压缩（如 webpack 的
html-webpack-plugin配置minify）是长期可靠的方案
所有这些间隙的本质，都是 HTML 解析器把源码中的空白符当成了真实内容；CSS 层面的修补只是绕过问题，而理解空白符如何变成文本节点，才是控制布局稳定性的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
