inline-block元素间4px间隙源于HTML换行符被解析为文本节点；可采用父容器font-size:0+子元素重置字号、改用flex布局、HTML注释隔断或JS模板字符串去换行等方案解决。

inline-block 元素间凭空多出 4px 怎么办

这不是 CSS 没写对，是 HTML 解析器把换行符当成了一个真实存在的文本节点，宽度 ≈ font-size 的 0.25em（常见为 4px）。哪怕你写了 margin: 0、vertical-align: top，它还在那儿。

• 最稳的现场解法：父容器加 font-size: 0，子元素显式重置 font-size（比如 16px），注意 等表单控件也要单独设字号
• 一劳永逸方案：改用 display: flex，天然忽略源码空白，再配 gap 精确控制间距
• 零 CSS 改动方案：HTML 注释隔断，写成
  1
  2
  ，注释必须紧贴标签，前后不能有空格

动态拼接 HTML 时间隙忽隐忽现

静态 HTML 里换行产生间隙，但 JS 动态插入时有时没间隙——根源在字符串是否含换行符。jQuery 的 .html() 或原生 innerHTML 会忠实解析你传入的字符串里的空白。

• 错误写法：$("#box").html(`-\n\n+`) → 换行被解析为文本节点 → 出现间隙
• 正确写法：用 ES6 模板字符串连写，中间不换行、不空格：`-+`
• 若需可读性，可在 JS 中用正则清洗：str.replace(/>\s+, '>，但注意别误删属性值内的空格

图片下方莫名多出几像素空白

是 inline 元素，默认基线对齐（baseline），浏览器会预留空间给字母“g”“y”的下伸部分，导致图片底部和父容器底边之间出现约 4px 空隙。

• 最快修复：img { vertical-align: middle } 或 top，避开 baseline 对齐逻辑
• 更彻底方案：img { display: block }，让它脱离行内上下文，不再参与基线计算
• 如果父容器是 flex 容器，align-items: center 同样能自然消除该间隙

body 顶部或两侧总有不可解释的空白

不是你漏写了什么，是浏览器默认给 加了 margin: 8px（Chrome/Firefox/Edge 均如此），有些还附带 padding。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 直接清掉：body { margin: 0; padding: 0; }
• 更稳妥做法：引入 normalize.css 或 reset.css，统一处理各浏览器默认样式差异
• 注意：清完后检查
  、
  等自带 margin 的元素是否需要重设，否则段落会挤在一起

空格问题的本质，从来不是“怎么多打几个空格”，而是“怎么让浏览器别把它当空格”。真正难的不是加间隙，是识别哪个间隙来自 HTML 解析、哪个来自 CSS、哪个来自字体度量——三者混在一起时，只调 margin 往往白忙活。

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