inline-block 表单元素间 4px 空隙源于 HTML 解析器将换行/空格视作文本节点；推荐改用 flex 或 grid 布局，或设父容器 font-size: 0 后重置子元素字体大小。
为什么 inline-block 表单元素间总有 4px 空隙
这不是 CSS 写错了，是 HTML 解析器把换行符和空格当成了文本节点——哪怕你写了 margin: 0、padding: 0，那几像素间隙依然在。常见于用 display: inline-block 排 label 和 input 的场景。
最直接的现场解法：font-size: 0 加在父容器上，再单独给子元素设 font-size（否则文字消失）。但更推荐绕开这个问题本身：
- 改用
display: flex，天然无视空白符，gap控制间距更可控 - 或改用
display: grid，列宽由容器定义，不依赖子元素排版顺序 - 避免在
label和input之间写换行或空格，压缩 HTML（仅限简单场景）
flex 布局下表单元素“挤在一起”怎么松动
Flex 容器默认不分配额外空间，label 和 input 可能紧贴、错位甚至换行异常。关键不是加 margin，而是用 gap + 明确的尺寸约束。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
gap: 8px放在.form-group上，统一控制水平/垂直空隙 -
label设flex: 0 0 120px（固定宽度不缩放），input设flex: 1填满剩余空间 - 必须加
align-items: center，否则 baseline 对齐会让输入框底部悬空 - 禁用
input上的margin-bottom—— 它会破坏正常态高度，导致错误提示出现时布局跳变
紧凑布局下错误提示一出就撑开表单怎么办
插入 <div class="error"> 后高度突增，相邻 <code>.form-group 被顶偏，本质是流式布局对 DOM 插入的自然响应，不是 JS 错误。
立即学习“前端免费学习笔记（深入）”；
- 给
.form-group加min-height: 64px，预留错误提示空间（按字体大小+行高估算） - 错误提示用
position: absolute+top: 100%，但前提是.form-group有position: relative - 切换显示时用
display: none，别用visibility: hidden—— 它仍占文档流位置 - 如果用
opacity: 0配合过渡，记得加height: 0+overflow: hidden防止内容溢出
移动端窄屏下表单还保持“紧凑”但可操作，怎么平衡
紧凑 ≠ 拥挤。真正影响可用性的是点击热区和视觉节奏，不是绝对像素值。
- 手机端
gap降到12px，但label字体不小于16px，input高度不小于44px（WCAG 最小触控尺寸） - 用
* { box-sizing: border-box }统一盒模型，避免 padding 导致宽度溢出 - 禁用
letter-spacing在中文标题里——它会拉散字距，反而降低可读性 - 如果用
fieldset分组，记得legend必须为首个子元素，且不要套span或图标，否则部分读屏器会跳过
实际最难的不是调几个像素，而是意识到：表单间隙问题从来不是孤立的样式修补，它牵扯到 HTML 解析规则、CSS 布局模型、无障碍语义和移动端交互规范四者的交叠。改一处，常要同步检查其他三处是否断裂。
