小屏幕下如何移除Hero区域图片下方的多余内边距或边框

我之前也碰到过几乎一模一样的问题！你遇到的空隙大概率是父容器的padding设置和小屏幕下图片高度的冲突导致的，咱们一步步拆解解决：

问题根源分析 #

看你的CSS代码，有两个关键“坑”在搞事情：

1. .hero 里的 padding: 60px 0：你用了绝对定位的图片（inset:0），本来应该完全覆盖父容器，但这个padding会让父容器的可布局区域被撑开，小屏幕下min-height: calc(100vh - 92px)和height:100vh的组合，再加上padding，就会出现计算误差。
2. 媒体查询里给.hero img设了height:auto：object-fit:cover需要明确的容器高度才能正常拉伸图片，设height:auto会让图片按原始比例缩放，没法填满整个.hero容器，自然就留出了空隙。

具体修复步骤 #

1. 移除父容器的多余padding

既然图片是绝对定位铺满整个.hero，那给.hero加padding:60px 0完全没必要，直接删掉这行，再加个box-sizing避免后续布局bug：

.hero {
  width: 100%;
  height: 100vh;
  min-height: calc(100vh - 92px);
  position: relative;
  /* 删掉这行：padding: 60px 0; */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box; /* 确保宽高计算包含border/padding */
}

2. 修正图片的媒体查询样式

所有小屏幕媒体查询里，把.hero img的height:auto删掉，保持height:100%，让object-fit:cover正常工作：

/* 以iPhone SE的媒体查询为例，其他设备同理修改 */
@media (min-width: 370px) and (max-width: 380px) and (max-height: 670px) {
  .hero img {
    object-fit: cover;
    /* 删掉这行：height: auto; */
    height: 100%;
    border: none;
  }
  /* 其他样式不变 */
}

3. 额外保险：消除图片的默认inline间距

虽然你已经给图片设了display:block，但有些浏览器会残留inline元素的基线间距，再加一行保险：

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  vertical-align: middle; /* 消除默认基线空隙 */
  border: 0; /* 强制去掉任何可能的默认边框 */
}

最后排查 #

如果做完上面的步骤还有空隙，你可以：

• 检查图片本身是否底部有透明区域（用图片编辑器打开就能看到）；
• 给.hero加个临时的background-color: red，看看空隙是来自图片还是容器本身，快速定位问题。

按这个方法改完，小屏幕下的空隙应该就消失了！

内容来源于stack exchange