inline-block元素间4px间隙源于html解析器将换行/空格转为文本节点，其宽度为父元素font-size的0.25em；可用font-size:0+子元素重置字号、html注释消除空白或改用display:flex解决。
空格本身不会“引起”错乱，是浏览器按规范合并空白的行为，在特定布局上下文中暴露为视觉异常——比如 inline-block 元素间多出 4px 间隙，或 textarea 因换行导致 placeholder 不显示。
为什么 inline-block 元素之间总有间隙
HTML 源码中两个 <div style="display: inline-block"></div> 标签之间的换行符或空格，会被解析为一个文本节点（值为 " "），再按当前 font-size 渲染成约 4px 宽的空白。这不是 bug，是行内格式化上下文的正常表现。
- 最直接的修复是删掉 HTML 中标签间的换行和空格：
<div></div> <div></div> - 用注释“吃掉”空白：
<div></div> <!-- --><div></div> - 父容器设
font-size: 0，子元素单独恢复字号（注意line-height和继承影响） - 改用
display: flex或display: grid—— 它们完全无视源码空白，语义也更清晰
textarea placeholder 不显示的真正原因
textarea 的 placeholder 只在内容为空时显示；而标签内部的换行、空格、制表符都会被当作初始内容，导致 placeholder 被压制。
- 错误写法：
<textarea>\n </textarea>（换行+空格 → 内容非空） - 正确写法：
<textarea></textarea>（紧挨着写，中间无任何空白字符） - 若需预填内容，用 JS 动态赋值
value，而非靠缩进留空 - 不推荐用
white-space: pre强行保留空白来“绕过”，那会破坏交互逻辑
想保留多个空格或缩进，别硬塞
是字符级控制，适合防断行（如 Mr. Smith），但不适合整段缩进或对齐——它增加 HTML 体积、干扰屏幕阅读器、响应式下易溢出。
- 代码片段、诗歌等需精确保留空白的场景，优先用
<pre class="brush:php;toolbar:false;"></pre>+white-space: pre-wrap - 通用文本中多个空格失效？不是空格错了，是默认
white-space: normal在起作用 - 真正该改的是 CSS：
white-space: pre-line（合并空格但保留换行）、white-space: pre-wrap（都保留，且允许折行） - 避免给按钮、标题等加
white-space: nowrap后又依赖空格分隔图标和文字——空格会被吞掉，文字会粘连
最常被忽略的一点：空格问题从来不是孤立的 HTML 语法问题，而是 HTML 解析规则 + CSS 渲染行为 + 布局上下文三者叠加的结果。盯着源码删空格治标，理解 display 类型与 white-space 的协作关系才治本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
