html中inline-block元素间空白由换行符和空格生成的文本节点导致，固定约4px间隙；p标签默认margin为1em，调整段距应覆盖margin而非padding或line-height。
为什么改了 margin 还有奇怪空白？
不是 CSS 没生效，而是 HTML 源码里的换行符和空格被解析成了文本节点——尤其在 inline-block 元素之间，会固定产生约 4px 的间隙。哪怕你写了 margin: 0、padding: 0，它也照常出现。
常见场景：导航菜单、图标列表、卡片网格用 display: inline-block 排列时，元素间莫名卡着白缝。
- 直接删 HTML 换行缩进（不推荐，可读性崩坏）
- 给父容器设
font-size: 0，子元素再单独设字体大小（兼容性好，但需注意继承） - 改用
display: flex+gap（现代方案，语义清晰，无间隙副作用） - 用注释节点“吃掉”空白：
<div> <span>A</span><!-- --><span>B</span> </div>
p 标签上下空太多或太少怎么调？
浏览器默认给 p 加了 margin-top 和 margin-bottom（通常是 1em），这不是 bug，是规范行为。想调间距，就直接覆盖这两个值——别碰 padding 或 line-height，那只会撑盒子或挤行高，跟段落间距无关。
容易踩的坑：
- 只设
margin-bottom，结果相邻段落外边距合并，视觉空隙没变大 - 用
height强行拉高，破坏流式布局，可能遮背景或触发滚动条 - 在重置样式里把
line-height设成1，段内文字糊成一团，还误以为“段距小了”
实操建议：
- 统一控制：
p { margin: 0.8em 0; } - 首末段去多余空：
.content p:first-child { margin-top: 0; } .content p:last-child { margin-bottom: 0; } - 局部调整某一段下方空隙：
.intro p { margin-bottom: 1.2em; }
多个段落堆一起，想统一控距用 gap 还是 margin？
gap 确实干净，但前提是容器得是 flex 或 grid。比如把所有 p 包进一个 div，然后设 display: flex; flex-direction: column; gap: 1.2em;，再清掉 p 的默认 margin，就能避免外边距合并、逻辑更可控。
但注意：
-
gap在display: block容器里完全无效 - IE 全系不支持，iOS Safari 14.5+ 才稳定，老环境会回落成“没间距”
- 安全写法要带降级：
.stack { display: flex; flex-direction: column; gap: 1.2em; } .stack p { margin: 0; }
95% 的普通文章排版，老老实实用 margin 就够了；只有当段落结构固定、且明确需要响应式统一调控时，才值得引入 gap + 布局模型切换。
中文标题或短句要不要加 letter-spacing？
中文段落正文一般不用调 letter-spacing，汉字方块结构天然紧凑，乱加反而割裂阅读流。但它在特定场景下真有用：
- 标题/标语类短句：
h2 { letter-spacing: 0.08em; }（增强张力，别超 0.15em） - 中西混排处微调英文部分，比如
"iOS 系统"中的iOS可套<span class="tight-en">iOS</span>单独加0.5px - 等宽字体或手写体小字号下防粘连，加
0.1–0.2em提升辨识度
关键提醒：
- 慎用负值，-1px 以上移动端极易重叠，必须多端实测
- 单位优先用
em或无单位值，px在缩放时易失比例 -
letter-spacing会继承，如果套了strong或em，得手动重置
最常被忽略的是：字距变化会悄悄改变视觉密度，所以一旦调了 letter-spacing，最好同步微调 line-height（比如 +0.05），否则行间会显得局促。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
