无法消除wave-img图片与skills div元素间的空白，求原因排查

无法消除波浪图片与skills <div> 元素之间的空白，尝试所有已知方法均无效，也找不到错误所在。通过开发者工具检查，图片和div的margin、padding都未占用该空白区域，鼠标悬停空白部分时选中的是整个body元素，需要找到空白产生的原因。

HTML代码 #

<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>

CSS代码 #

.wave-img {
    padding: 0;
    margin: 0em;
    margin-top: 4em;
}
img {
    height: 100%;
    width: 100%;
    align-self: center;
    padding-top: 1em;
}
img {
    overflow-clip-margin: content-box;
    overflow: clip;
}
.skills {
    margin: 0em;
    background-color: var(--purple);
    position: relative;
    height: 100vh;
}
div {
    padding: 1em 4em 3em 4em;
}
div {
    display: block;
}

原因分析与解决方案 #

核心原因：图片的行内元素特性 #

<img> 标签默认是行内替换元素，浏览器会为行内元素预留基线空间（用于容纳g、y这类带下沉部分的字母），这就是空白的来源。

解决步骤 #

1. 将图片设置为块级元素
   给.wave-img添加display: block;，彻底消除行内元素的基线留白：

.wave-img {
    padding: 0;
    margin: 0em;
    margin-top: 4em;
    display: block; /* 新增该行 */
}

2. 清理全局样式干扰
   全局img样式中的padding-top: 1em;存在潜在干扰，建议直接移除该属性，或确保.wave-img的样式优先级覆盖它（当前类选择器优先级已高于标签选择器，清理冗余样式更稳妥）。

3. 重置body默认样式
   浏览器默认会给body添加margin: 8px，虽然当前空白并非直接由此导致，但重置全局默认样式可以避免其他潜在布局问题：

body {
    margin: 0;
    padding: 0;
}

内容的提问来源于stack exchange，提问作者Ayushi Choudhary