如何清除HTML中img与相邻DIV间不属于任何标签的空白间隙

现有如下HTML结构：

<img src="/static/media/call-of-duty-mobile-promo-banner.c6a9b17af598e76351f1.jpg" id="banner" alt='' />
<div id="DIV_1">
    <div id="DIV_2">
        <div id="DIV_3">
            login
        </div>
    </div>
    <div id="DIV_4">
        <img src='cart.jpg'></img>
    </div>
</div>

对应CSS代码如下：

#banner {
    box-sizing: border-box;
    column-gap: 0px;
    row-gap: 0px;
    width:100vw;
    font: 16px "Times New Roman";
    margin: 0;
    padding: 0;
}
#DIV_1 {margin: 0;
    padding: 0;
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 50px;
    width: 1486.93px;
    background: red;
    font: 16px "Times New Roman";
  }
  #DIV_2 {
    align-content: center;
    align-items: center;
    block-size: 50px;
    box-sizing: border-box;
    display: flex;
    height: 50px;
    inline-size: 490.683px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    perspective-origin: 245.333px 25px;
    transform-origin: 245.342px 25px;
    width: 490.683px;
    font: 16px "Times New Roman";
  }
  
  
  #DIV_3 {
    block-size: 30px;
    border-block-end-color: rgb(50, 67, 79);
    border-block-end-style: solid;
    border-block-end-width: 2px;
    border-block-start-color: rgb(50, 67, 79);
    border-block-start-style: solid;
    border-block-start-width: 2px;
    border-end-end-radius: 30px;
    border-end-start-radius: 30px;
    border-inline-end-color: rgb(50, 67, 79);
    border-inline-end-style: solid;
    border-inline-end-width: 2px;
    border-inline-start-color: rgb(50, 67, 79);
    border-inline-start-style: solid;
    border-inline-start-width: 2px;
    border-start-end-radius: 30px;
    border-start-start-radius: 30px;
    box-sizing: border-box;
    caret-color: rgb(33, 37, 41);
    color: rgb(33, 37, 41);
    column-rule-color: rgb(33, 37, 41);
    cursor: pointer;
    direction: rtl;
    height: 30px;
    inline-size: 94px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    overflow-wrap: break-word;
    perspective-origin: 47px 15px;
    text-align: center;
    text-decoration: none solid rgb(33, 37, 41);
    text-emphasis-color: rgb(33, 37, 41);
    text-size-adjust: 100%;
    transform-origin: 47px 15px;
    width: 94px;
    background: rgb(78, 254, 177) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 2px solid rgb(50, 67, 79);
    border-radius: 30px;
    font: 700 13px / 26px IRANSans, "Open Sans";
    list-style: outside none none;
    outline: rgb(33, 37, 41) none 0px;
  }
  
  #DIV_4 {
    align-content: center;
    block-size: 50px;
    box-sizing: border-box;
    display: flex;
    height: 50px;
    inline-size: 996.233px;
    justify-content: flex-end;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    perspective-origin: 498.117px 25px;
    transform-origin: 498.117px 25px;
    width: 996.233px;
    font: 16px "Times New Roman";
  }

页面渲染时，首图#banner和红色#DIV_1之间出现了一段空白间隙：

已经尝试给两个元素设置margin: 0和padding: 0，但间隙没有消失，通过浏览器检查元素功能查看，这段间隙既不属于img元素，也不属于div元素。

这个间隙是浏览器默认渲染规则导致的：img属于行内替换元素，默认vertical-align属性值为baseline，即和父元素的文本基线对齐。基线下方会预留一小段空间，用来容纳p、g、j这类字母的下行部分，这段预留空间就是看到的不属于任何元素的空白间隙，和margin、padding无关，所以修改这两个属性不会生效。

以下三种方法都可以消除间隙，优先推荐前两种，对其他元素影响最小：

• 方法1：将图片转为块级元素，彻底脱离行内对齐逻辑

#banner {
  /* 保留原有其他属性，新增下面一行 */
  display: block;
}

• 方法2：修改图片的垂直对齐方式，避开基线对齐

#banner {
  /* 保留原有其他属性，新增下面一行，值选top/middle/bottom均可 */
  vertical-align: bottom;
}

• 方法3：给图片的父容器（当前场景下为body）设置字号为0，消除基线预留空间；如果容器内有其他文本内容，需要单独给文本元素重设字号

body {
  font-size: 0;
}
/* 给包含文本的元素单独重设字号 */
#DIV_1, #DIV_3 {
  font-size: 16px;
}

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