如何用CSS/HTML消除图片底部间隙？

方法一：将图片设为块级元素 #

行内元素默认的基线对齐是间隙产生的核心原因，把图片转为块级元素即可彻底消除：

.content-wrapper img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: block; /* 新增该行 */
}

方法二：设置父元素行高为0 #

通过消除父元素的行高，去掉行内元素带来的间距：

.content-wrapper {
  position: relative;
  line-height: 0; /* 新增该行 */
}

方法三：调整图片垂直对齐方式 #

改变图片的垂直对齐基准，避免基线对齐产生的空隙：

.content-wrapper img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  vertical-align: bottom; /* 新增该行 */
}

以上三种方法都能快速解决问题，推荐使用第一种，逻辑清晰且不会干扰其他元素布局。

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