如何去除Flex布局3×3图片网格的边缘内边距？

方案一：使用Flex gap 属性（最推荐） #

直接用Flex原生的gap控制元素间间距，替代给子元素加padding的方式，从根源避免边缘间距问题：

修改你的CSS代码：

.gallery__img-list {
  @include tablet {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* 替代子元素的左右padding，实现元素间1rem的间距 */
  }
}

.gallery__img {
  padding: 0.5rem 0;
  width: 100%;
  height: auto;
  @include tablet {
    width: calc(33.333% - 0.666rem); /* 调整宽度抵消gap影响，保证3列布局 */
    padding: 0.5rem 0; /* 只保留上下内边距，左右设为0 */
  }
}

原理：gap只会在元素之间添加间距，不会作用于容器边缘，完美匹配需求，代码简洁易维护。

方案二：容器负margin抵消边缘padding #

如果不想改动子元素的padding逻辑，给父容器加负margin抵消子元素的边缘padding：

.gallery__img-list {
  @include tablet {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0 -0.5rem; /* 负margin抵消子元素的左右padding */
  }
}

/* .gallery__img 的原有样式保持不变 */

原理：父容器的负margin向外扩展，刚好覆盖子元素边缘的padding，让边缘图片和容器对齐。

方案三：用nth-child选择器精准控制边缘元素 #

不用改动容器，直接选中每行的首尾元素去掉对应方向的padding：

.gallery__img {
  padding: 0.5rem 0;
  width: 100%;
  height: auto;
  @include tablet {
    width: 33%;
    padding: 0.5rem;
  }
}

/* 在tablet断点下添加 */
@include tablet {
  /* 每行第一个元素去掉左padding */
  .gallery__img:nth-child(3n+1) {
    padding-left: 0;
  }
  /* 每行最后一个元素去掉右padding */
  .gallery__img:nth-child(3n) {
    padding-right: 0;
  }
}

原理：利用3n+1选中第1、4、7个元素（每行第一个），3n选中第3、6、9个元素（每行最后一个），针对性去掉边缘padding。

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