html结构中图片下方的间隙

问题场景

定位的时候发现元素覆盖图片有间隙

产生原因

图片下方的间隙通常是由于默认的 margin 和 padding 设置引起的。要解决这个问题，可以通过以下几种方法之一来消除间隙：

解决方案

方法 1: 设置 display: block; 属性

将图片的 display 属性设置为 block，这样可以消除行内元素（如图片）下方的间隙。

html
复制
<img src="https://img-va.myshopline.com/image/store/1701686244663/16c189101379435288f46ddf820c8da8.png?w=800&amp;h=200" width="100%" style="display: block;">

方法 2: 设置 vertical-align: top;【验证使用此方法】

如果你不想改变 display 属性，可以使用 vertical-align 属性：

html
复制
<img src="https://img-va.myshopline.com/image/store/1701686244663/16c189101379435288f46ddf820c8da8.png?w=800&amp;h=200" width="100%" style="vertical-align: top;">

方法 3: 设置父元素的 overflow: hidden;

在包含图片的父元素上设置 overflow: hidden;，这也可以消除间隙。

css
复制
.custom-new-promotional-html > div {
    overflow: hidden;
}

方法 4: 移除 margin 和 padding

确保没有其他 CSS 样式影响到间隙，特别是 margin 和 padding。