CSS Grid单元格底部6px空白问题：博客响应式布局适配求助

嘿，这个问题我太熟了！你遇到的6px间隙其实是图片作为行内替换元素的默认基线对齐行为导致的，和CSS Grid本身关系不大，但在Grid布局的场景下会很明显。不用硬指定行尺寸破坏响应性，这几个简单的方法就能完美解决：

• 将图片设置为块级元素：
  行内元素的基线对齐会预留出一点空间（用来容纳字母的下伸部分，比如g、y），把图片改成块级就能彻底消除这个间隙：

  .post-image img {
    display: block;
  }
  

• 调整图片的垂直对齐方式：
  强制图片对齐到容器的底部/顶部/中间，跳过基线预留的空间：

  .post-image img {
    vertical-align: bottom; /* top 或 middle 也能达到同样效果 */
  }
  

• 给图片容器设置行高或字体大小为0：
  基线间隙的大小和容器的行高、字体大小直接相关，把它们设为0就能消除这个额外空间：

  .post-image {
    line-height: 0;
    /* 或者 font-size: 0; 二选一即可 */
  }
  

这三个方法都不会影响你的响应式布局——图片依然可以根据容器尺寸自适应缩放，完全不需要固定Grid的行尺寸。

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