CSS Grid图片列底部莫名空白问题求助

云上老周

2026-8-6

解决CSS Grid布局中图片列底部空白的问题

你遇到的是图片作为替换元素在Grid列中产生底部空白的常见问题，根源多与浏览器默认排版规则或元素对齐方式有关，以下是几种直接有效的解决方法：

方法1：给图片添加垂直对齐属性
给图片设置vertical-align: bottom，消除基线对齐残留的空白：

<div><img style="display: block; vertical-align: bottom;" src="https://cdn.shopify.com/s/files/1/0507/8623/8664/files/sherpa_crestone_4runner_roof_rack.webp?v=1672120213"></div>

方法2：清除父容器的行高
给包裹图片的div设置line-height: 0，避免行高带来的额外空隙：
```
.rack-info-container > div:first-child {
  line-height: 0;
}
```

方法3：让图片适配列宽
设置图片宽度为100%，自动调整高度，确保填满Grid列的宽度，消除尺寸不匹配产生的空白：

<div><img style="display: block; width: 100%; height: auto;" src="https://cdn.shopify.com/s/files/1/0507/8623/8664/files/sherpa_crestone_4runner_roof_rack.webp?v=1672120213"></div>

方法4：调整Grid容器的对齐方式
给Grid容器添加align-items: start，让列内容顶部对齐，避免容器拉伸内容导致空白：

.rack-info-container {
  background-color: #EFEFEF;
  padding: 0 !important;
  margin: 0 !important;
  display: grid;
  grid-template-columns: 1.8fr 3fr;
  column-gap: 20px;
  align-items: start;
}