HTML 中内联级图片（<img>）默认按基线（baseline）对齐，会预留文本行高（line-height）导致底部出现不可见空白；只需设置 vertical-align: top 即可精准消除。
html 中内联级图片（``）默认按基线（baseline）对齐，会预留文本行高（line-height）导致底部出现不可见空白；只需设置 `vertical-align: top` 即可精准消除。
在网页布局中，常遇到一个看似“无解”的视觉问题：一张铺满容器的波浪背景图（如 <img class="wave-img" src="images/background-curve.png">）紧接其后是一个 <div class="skills">，但二者之间却始终存在一段无法通过 margin 或 padding 消除的白色缝隙。即使开发者已将图片和 div 的外边距、内边距全部设为 0，在浏览器开发者工具中也查不到任何显式占用空间的样式——该空白区域 hover 时甚至会高亮整个 <body>。根本原因并非代码遗漏，而是 HTML/CSS 的底层渲染机制所致。
? 根本原因：<img> 是内联元素，默认参与行盒（inline formatting context）
<img> 元素默认为 display: inline，浏览器会将其视为普通文字字符（类似字母“g”或“y”），为其预留基线对齐所需的空间——即下方用于容纳字体降部（descenders）的区域。即使图片本身没有内容溢出，该行高（由父容器 line-height 决定，通常为 normal ≈ 1.2）仍会撑开行盒，导致图片底部与后续块级元素之间产生“幽灵间隙”。
✅ 正确解决方案：强制重置垂直对齐方式
只需为图片添加 vertical-align: top（或其他非 baseline 值，如 middle、bottom），即可让图片脱离文本流的基线约束，使其顶部与行框顶部对齐，从而彻底消除多余空白：
.wave-img {
padding: 0;
margin: 0;
margin-top: 4em;
/* 关键修复 */
vertical-align: top;
}
/* 或统一作用于所有 img（推荐） */
img {
display: block; /* 替代方案：转为块级，完全脱离行盒 */
height: 100%;
width: 100%;
/* 注意：若需保持响应式，建议配合 max-width: 100%; */
}? 两种主流修复方式对比：
- vertical-align: top：轻量、语义保留（仍为内联元素），适用于需与其他内联内容并排的场景；
- display: block：更彻底，完全移除行盒影响，适合独立全宽图片（如本文中的波浪分割线），且避免潜在的换行/空格问题。
⚠️ 补充注意事项
- 避免冗余 CSS：原代码中重复定义了 img 规则，且包含已废弃属性 overflow-clip-margin（仅实验性支持），建议清理；
- 响应式安全：若图片需自适应容器，请用 width: 100%; height: auto; 防止拉伸变形；
- 语义化建议：作为装饰性分割图形，该图片更适合用 CSS background-image 实现（支持 background-position: bottom 精准控制），既无 DOM 干扰，也规避所有内联元素陷阱。
✅ 最终精简推荐写法
<img class="wave-img" src="images/background-curve.png" alt="">
<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>
</div>.wave-img {
display: block; /* 推荐首选：简洁可靠 */
width: 100%;
height: auto;
margin-top: 4em;
}
.skills {
margin: 0;
background-color: var(--purple);
height: 100vh;
padding: 1em 4em 3em;
}掌握这一原理，不仅能解决波浪图与技能区的间隙问题，更能举一反三应对导航图标、按钮内嵌图片等各类“莫名空白”场景——本质都是内联元素与行盒渲染规则的隐式交互。
