HTML 中内联级 <img> 元素默认按基线（baseline）对齐，会因父容器的 line-height 和字体度量在底部预留空白；只需设置 vertical-align: top 即可精准消除该间隙。
html 中内联级 `` 元素默认按基线（baseline）对齐，会因父容器的 `line-height` 和字体度量在底部预留空白；只需设置 `vertical-align: top` 即可精准消除该间隙。
在网页布局中，一个看似微小却极易被忽视的问题是：图片（<img>）与其后紧跟的 <div> 之间出现无法通过 margin 或 padding 消除的空白间隙。这种现象并非由显式样式引起，而是源于 HTML/CSS 的渲染机制——<img> 默认为内联级（inline）元素，其行为受行内格式化上下文（Inline Formatting Context）约束。
当图片处于文本流中时，浏览器会将其视为类似字母“x”的内联内容，并依据父容器的 line-height 和字体的 baseline、descender 区域 分配垂直空间。即使图片本身没有下伸部分（如字母 g、y），浏览器仍会为其下方保留约 2–4px 的“隐形间隙”，用于容纳可能的 descender 字符。该间隙属于行框（line box）的一部分，而非图片自身的 margin 或 padding，因此在开发者工具中 hover 时往往显示为 body 或父容器的空白区域，导致排查困难。
✅ 正确解决方案：
为图片显式声明 vertical-align 属性，切断其与 baseline 对齐的默认行为。最常用且兼容性最佳的方式是：
.wave-img {
vertical-align: top; /* 关键修复 */
margin: 0;
padding: 0;
margin-top: 4em;
}
/* 或统一作用于所有 img（推荐精细化控制） */
img.wave-img {
vertical-align: top;
}⚠️ 注意事项：
- vertical-align 仅对 内联级（inline）、内联块级（inline-block）、表格单元格（table-cell） 元素生效；若将图片设为 display: block，则无需 vertical-align，但需注意这会使其脱离文本流，可能影响原有布局逻辑；
- 避免滥用 font-size: 0 或 line-height: 0 于父容器来“掩盖”问题——这会破坏可访问性（如屏幕阅读器语音节奏）且影响子元素字体继承；
- 不要依赖 overflow: clip 或 overflow-clip-margin 解决此问题，它们与行内空白无关，且 overflow: clip 兼容性有限（不支持 IE/旧版 Safari）；
- 若页面存在多个同类图片，建议统一添加 .wave-img { vertical-align: top; }，而非覆盖全局 img 样式，以保持语义清晰与样式可控。
? 扩展技巧：
如需更高灵活性（例如响应式对齐或与其他内联元素协同），也可使用 vertical-align: middle 或 vertical-align: bottom，但 top 是消除底部间隙最直接、最可靠的选择。配合现代布局方案（如 Flexbox），还可将图片和 .skills 封装进同一 flex 容器中：
<div class="hero-section"> <img class="wave-img" src="images/background-curve.png" alt="wave divider"> <div class="skills" id="skills">...</div> </div>
.hero-section {
display: flex;
flex-direction: column;
align-items: stretch;
}
.wave-img {
vertical-align: top; /* 仍建议保留，确保内联渲染一致性 */
}
.skills {
margin: 0;
background-color: var(--purple);
height: 100vh;
}综上，该空白的本质是 CSS 行内布局的固有特性，而非 bug。理解 vertical-align 的作用机制，并针对性地应用 vertical-align: top，即可优雅、高效、跨浏览器地解决这一高频布局难题。
