inline元素间空隙源于HTML解析器将换行缩进视作文本节点，结合inline/inline-block渲染规则产生约4px间隙；font-size:0是最稳妥的CSS解决方案，需配合子元素显式恢复字体大小。

为什么 inline 元素间会有空格间隙

不是 CSS 没写对，也不是浏览器 bug，而是 HTML 解析器把源码里的换行符、缩进和空格当成了文本节点，再结合 display: inline 或 display: inline-block 的渲染规则，把这些空白渲染成约 4px 宽的不可见间隙。常见于 、、、 并排时。

• 静态 HTML 中换行缩进必然触发该行为；动态拼接（如 $().html()）若字符串连写无换行，则不会生成空白文本节点
• vertical-align 默认为 baseline，会加剧图片/表单控件底部空隙，但不是元素间横向间隙的主因
• 用开发者工具检查 DOM，能看到间隙实际来自 #text 节点，而非元素自身的 margin/padding

font-size: 0 是最稳妥的 CSS 方案

不改 HTML 结构、不依赖 JS、兼容所有现代浏览器（包括 IE11），且能统一静态与动态渲染表现。

• 给父容器设 font-size: 0，直接让空白字符失去渲染宽度
• 必须为每个子元素显式恢复字体大小，例如 .inline-group > * 设 font-size: 16px
• 搭配 vertical-align: middle 可解决基线对齐导致的高低不齐问题
• 注意：若子元素含 placeholder 或伪元素生成内容，需单独确认其字体是否被继承影响

负边距（margin）只适合局部微调，慎用

margin-left: -4px 这类写法看似简单，实则脆弱——它依赖固定像素值，一旦字体大小、缩放比例或设备像素比变化，间隙可能重现或过度重叠。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• margin-top/margin-left 为负时，元素向参考方向移动；margin-bottom/margin-right 为负时，是后续元素被“拉过来”，可能覆盖前序内容
• 无法响应式：在 rem/em 单位或媒体查询中，负像素值难以同步缩放
• 与 flex/grid 布局冲突，且会干扰 box-sizing 和 overflow 行为
• 仅建议用于已知固定尺寸、无缩放需求的装饰性重叠（如图标叠加角标）

真正一劳永逸的写法：HTML 字符串零空白 + CSS fallback

动态插入时，用模板字符串连写标签；静态 HTML 也保持单行。再加一层 font-size: 0 作为兜底，二者叠加几乎消灭所有意外间隙场景。

• 动态示例：$("#container").html(`-+`)
• 静态示例：
  -+
• 关键细节：模板字符串里不能有换行，也不能在标签间加空格，哪怕一个都算数
• 别指望靠 white-space: nowrap 解决——它只影响内部文本换行，不消除元素间的空白节点

空格间隙本质是 HTML 解析规则，不是样式问题。所以修 CSS 不如先看源码有没有多出换行；用负边距不如直接删空白。最容易被忽略的，其实是把「可读性」和「功能性」混为一谈——格式化缩进对人友好，但对浏览器就是真实字符。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！