CSS图片画廊间距不一致求助：首图与其他图片间距过大

问题现象 #

使用HTML和CSS制作的图片画廊中，首图与其他图片之间的间距明显大于其余图片间的间距，相关CSS代码如下：

.gallery {
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    display: inline-block;
    border: 3px solid #8f8f8f;
    margin: 5px;
    border-radius: 15px;
    background-color: #29313d;
}
.gallery description {
    padding: 10px;
    text-align: center;
}
.gallery:hover {
    border: 3px solid #ccc;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.gallery img {
    width: 200px;
    height: 100px;
    border-radius: 12.5px;
    object-fit: cover;
}

修复方法 #

方法1：改用Flex布局（推荐） #

inline-block元素会因HTML中的换行空格产生额外间距，改用Flex布局可彻底解决该问题，同时更灵活控制间距：

1. 给画廊的父容器添加以下CSS（假设父容器类名为gallery-container）：

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* 统一设置图片项之间的间距 */
}

2. 调整.gallery的样式，移除原来的margin（gap已负责间距控制）：

.gallery {
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    border: 3px solid #8f8f8f;
    margin: 0;
    border-radius: 15px;
    background-color: #29313d;
}

方法2：消除inline-block的空格间距 #

若不想修改布局方式，可通过以下方式消除换行带来的空格：

1. 给画廊父容器设置font-size: 0：

.gallery-container {
  font-size: 0;
}

2. 给.gallery恢复正常字体大小，避免描述文字受影响：

.gallery {
    /* 原有样式保留 */
    font-size: 16px; /* 根据需求调整合适的字体大小 */
}

方法3：检查父容器默认样式 #

排查画廊父容器或body是否存在默认的padding或margin（比如padding-left导致首图左侧额外间距），可添加重置样式：

.gallery-container, body {
  margin: 0;
  padding: 0;
}

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