如何为Flexbox元素间添加内边距且边缘无内边距？

嘿，我来帮你搞定这个Flexbox内边距的需求！要实现子元素之间有间距，但容器边缘完全贴合无内边距的效果，其实有两种常用方案，我给你拆解一下：

方案1：用Flexbox原生的gap属性（推荐，简洁高效） #

gap是Flexbox专门用来设置子元素之间间距的属性，它只会在元素之间生成间距，不会影响容器的边缘，完美匹配你的需求。

首先先清理原代码里的冗余属性：.col里的float: left在Flex容器里完全没用，直接删掉就行。然后修改CSS如下：

.holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 500px;
  background: wheat;
  /* 这里设置子元素之间的水平+垂直间距，按需调整数值 */
  gap: 15px;
}
.col img {
  max-width: 100%;
}
.col {
  text-align: center;
  /* 因为gap会占用容器空间，所以需要调整子元素宽度，确保总宽度适配容器 */
  /* 假设你原本想放5个20%宽度的元素，总共有4个gap，所以每个元素宽度要减去总gap的1/5 */
  width: calc(20% - (15px * 4 / 5));
}

对应的HTML保持不变就行：

<div class="holder">
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
</div>

方案2：兼容旧浏览器（比如IE11）的负margin技巧 #

如果需要兼容不支持gap的旧浏览器，可以用子元素加margin + 容器加负margin的组合来实现：

.holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 500px;
  background: wheat;
  /* 负margin抵消子元素在容器边缘的margin */
  margin: 0 -10px -10px 0;
  padding: 0;
}
.col {
  text-align: center;
  width: 20%;
  /* 子元素之间的水平+垂直间距 */
  margin: 0 10px 10px 0;
  /* 确保宽度计算包含margin和padding，避免超出容器 */
  box-sizing: border-box;
}
.col img {
  max-width: 100%;
}

小提示 #

• 方案1的gap属性现代浏览器都支持（Chrome、Firefox、Edge、Safari 14.1+），如果不需要兼容旧浏览器，优先用它，代码更简洁易维护。
• 如果你想让子元素自动填充剩余空间，也可以把.col的width换成flex: 1 1 calc(20% - 12px)，这样元素会根据容器宽度自动调整，同时保持间距。

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