如何去除图片画廊中行与行之间的间距？

• 检查并清除元素外边距
  图片或其容器可能带有默认上下外边距，通过CSS直接重置：

  .gallery-item, .gallery-item img {
    margin: 0;
  }
  

• 解决行内元素基线间距问题
  若图片设为行内/行内块元素，浏览器会为基线预留空间，可通过以下两种方式解决：

  /* 方式1：将图片转为块级元素 */
  .gallery-item img {
    display: block;
  }
  
  /* 方式2：将图片对齐到顶部 */
  .gallery-item img {
    vertical-align: top;
  }
  

• 移除容器内边距
  画廊的父容器可能设置了上下内边距，检查并重置：

  .gallery-container {
    padding: 0;
  }
  

• 调整布局框架的间距设置
  如果使用Grid或Flex布局构建画廊，行间距可能由gap类属性控制，将其设为0即可：

  /* Grid布局 */
  .gallery-container {
    grid-row-gap: 0;
    /* 或使用简写属性 */
    grid-gap: 0;
  }
  
  /* Flex布局 */
  .gallery-container {
    row-gap: 0;
  }
  

• 消除浏览器默认样式影响
  引入全局样式重置，覆盖浏览器默认的margin、padding规则：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

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