CSS Grids问题：网格内div插入图片后底部出现边距

嘿，这个问题我之前踩过坑！其实这不是CSS Grid本身的问题，是图片默认的行内元素特性导致的～

图片默认是inline或者inline-block元素，浏览器会把它和文本的基线对齐，底部的空隙就是基线到容器底线的那一小段间距，和Grid布局本身无关，只是在Grid里这个问题更显眼而已。

给你几个简单有效的解决方法：

• 把图片设为块级元素（最推荐，无副作用）：

  img {
    display: block;
  }
  

  让图片脱离行内流，自然就不会有基线对齐带来的空隙了。

• 修改图片的垂直对齐方式：

  img {
    vertical-align: bottom; /* 或者 top、middle 都可以 */
  }
  

  改变图片的对齐基准，避开基线，空隙就会消失。

• 给父容器设置行高为0：

  .grid-item {
    line-height: 0;
  }
  

  这个方法要注意：如果父容器里还有其他文本内容，行高会被影响，所以只适合容器里只有图片的情况。

• 用Grid属性强制填满容器：
  如果希望图片能自适应Grid项的大小，还可以这么写：

  .grid-item {
    display: grid; /* 让Grid项本身也成为网格容器 */
  }
  .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 可选，控制图片缩放方式，避免变形 */
  }
  

  这样图片会完全填满Grid项，既没有空隙，还能灵活控制图片的显示效果。

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