本文详解图片与紧邻 div 之间出现不可见空白的根本原因（行内布局与 vertical-align 的默认行为），并提供简洁可靠的解决方案：为 img 添加 vertical-align: top，辅以合理重置默认样式。
本文详解图片与紧邻 div 之间出现不可见空白的根本原因（行内布局与 vertical-align 的默认行为），并提供简洁可靠的解决方案：为 img 添加 `vertical-align: top`，辅以合理重置默认样式。
在网页布局中，一个看似微小却令人困扰的现象频繁出现：一张图片（<img>）紧接在它下方的 <div> 元素之间，始终存在一段无法通过常规 margin 或 padding 检查到的空白间隙。该间隙在开发者工具中 hover 时甚至可能高亮整个 <body>，而非具体元素——这正是问题的关键线索：它并非来自盒模型，而是源于 CSS 的行内格式化上下文（Inline Formatting Context）。
<img> 元素默认为 inline-level 元素（等同于 display: inline），会像文字一样参与行框（line box）的构建。浏览器会为其所在行分配默认的 line-height（通常约为字体大小的 1.2 倍），并依据 vertical-align 的默认值 baseline 对齐——即图片底部与父容器内基线（通常是文本字母 x 的底部）对齐。而基线下方还预留了容纳字母如 g、j、y 的「降部（descender）」空间。这段预留空间，就是图片下方“凭空出现”的空白来源。
✅ 正确解法极其简洁：显式设置 vertical-align: top（或 middle、bottom 等非 baseline 值），使图片顶部与行框顶部对齐，从而彻底消除降部空间的影响。
以下是优化后的推荐代码：
.wave-img {
display: block; /* 可选但更稳妥：转为块级，完全脱离行内流 */
margin: 0;
margin-top: 4em;
height: auto; /* 避免因宽高固定导致拉伸失真 */
width: 100%;
}
/* 关键修复：解决 inline 图片的 baseline 间隙 */
img {
vertical-align: top; /* ✅ 核心修复行 */
/* 移除冗余且冲突的声明 */
/* align-self: center; —— 仅对 flex/grid 子项有效，此处无效 */
/* overflow-clip-margin / overflow: clip; —— 与空白无关，可删除 */
}
.skills {
margin: 0;
background-color: var(--purple);
height: 100vh;
position: relative;
}
.skills,
div {
padding: 1em 4em 3em;
}<img class="wave-img" src="images/background-curve.png">
<div class="skills" id="skills">
<h1 class="skills-title">Skills</h1>
<ul class="skills-list">
<li class="skills-item-1 skills-item">HTML5</li>
</ul>
<br><br><br><br><br>
</div>⚠️ 注意事项：
- 不要依赖 font-size: 0 或 line-height: 0 等 hack 方式，它们可能破坏文本可访问性或引发其他布局副作用；
- 若图片需响应式缩放，建议使用 max-width: 100%; height: auto; 替代固定 height: 100%，防止内容溢出或变形；
- display: block 是比 vertical-align 更彻底的方案（尤其当图片无需与其他内联元素并排时），二者可任选其一，或组合使用（block + vertical-align 无冲突，但后者失效）；
- 所有自定义类名（如 .wave-img, .skills）应确保全局唯一，避免 CSS 层叠污染。
总结：该问题本质是 CSS 行内布局的隐式行为，而非 bug。理解 vertical-align 与 baseline 的关系，是精准控制图文混排间距的基础能力。一次 vertical-align: top，即可优雅归零那恼人的空白。
