求助：音乐播放列表图片底部白色间隙的原因排查

我几乎完全不懂编程，代码能运行纯靠运气。我用网上找的两段代码做了个iTunes和Spotify播放列表原型，现在遇到个问题：长图滚动容器和底部固定图之间有个白色间隙。

我用的代码如下：

<div>
    <style>
      .imageitunes{
        width: 100%;
        height: 400px;
        overflow: auto;
      }
       .myimageitunes{
 width:750px;
 position: relative;
 bottom:0%;
      }
    </style>
</div>
    <div class="imageitunes">
    <img src="https://mylegshurt.co.uk/wp-content/uploads/2023/02/ituneslong2.png" alt="myimageitunes">
  </div>
  <div class="myimageitunes">
    <img src="https://mylegshurt.co.uk/wp-content/uploads/2023/02/itunes-bottom.png" alt="myimageitunes">
  </div>

我折腾了两天才调出不破坏网站的可用效果，但这个间隙一直消不掉。想请教：这个间隙是什么原因？是不是因为两个元素是独立div？如果是，怎么不合并div的前提下消除间隙？

间隙产生的原因 #

这个白色间隙主要来自两个常见问题：

• 浏览器默认外边距：大部分浏览器会给<div>这类块级元素设置默认的上下外边距，两个独立div自然会出现间距。
• 图片的行内块特性：<img>属于行内块元素，默认和文字基线对齐，底部会留出一小段空白，也会表现为间隙。

不合并div的消除方案 #

给你几个简单直接的修改方法，选一个适用的就行：

方案1：清除div的默认外边距

给两个容器div添加margin: 0，直接去掉浏览器默认的间距：

.imageitunes{
  width: 100%;
  height: 400px;
  overflow: auto;
  margin: 0; /* 新增此行 */
}
.myimageitunes{
  width:750px;
  position: relative;
  bottom:0%;
  margin: 0; /* 新增此行 */
}

方案2：修正图片的显示方式

把<img>改成块级元素，消除基线对齐带来的空白：
在样式里新增这段：

.imageitunes img, .myimageitunes img {
  display: block;
}

方案3：负外边距应急调整

如果上面两种方法没效果，可以给底部的.myimageitunes加负的上边距，强行抵消间隙（数值根据实际间隙大小调整）：

.myimageitunes{
  width:750px;
  position: relative;
  bottom:0%;
  margin-top: -8px; /* 可自行调整数值 */
}

优先尝试方案1和2，这两个是从根源解决问题的方法，比应急的负外边距更稳妥。

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