如何在HTML和CSS中去除Div内部边缘的图片间距？

要实现外层图片与div边缘无间距、同时图片之间保留10px空隙的效果，这里提供两种实用方案：

方案一：用Flex Gap属性（推荐） #

这种方式最省心，不需要手动调整边缘元素的margin，直接通过Flex容器的gap控制间距：

.soot {
  width: 33.3%;
  height: 400px;
  margin: 0; /* 去掉原有的全局margin */
  border: 2px solid yellow;
}

.imgbox {
  width: 100%;
  background-color: white;
  padding: 10px 0; /* 添加上下内边距，避免首尾行图片贴容器边缘 */
  margin-top: 10px;
  border: 1px solid gray;
}

.show {
  display: flex;
  gap: 10px; /* 图片之间的水平间距设为10px */
  margin-bottom: 10px; /* 每行之间的垂直间距 */
}

/* 去掉最后一行的底部间距 */
.show:last-child {
  margin-bottom: 0;
}

方案二：手动调整边缘元素Margin #

如果需要兼容不支持gap的旧浏览器，可以用这种方式：

.soot {
  width: 33.3%;
  height: 400px;
  margin: 10px; /* 保留图片间的基础margin */
  border: 2px solid yellow;
}

.imgbox {
  width: 100%;
  background-color: white;
  padding: 0;
  margin-top: 10px;
  border: 1px solid gray;
}

.show {
  display: flex;
  margin: 0 -10px; /* 负margin抵消图片左右margin带来的容器边缘空隙 */
  margin-bottom: 10px; /* 每行之间的垂直间距 */
}

/* 移除最后一行的底部间距 */
.show:last-child {
  margin-bottom: 0;
}

/* 去掉第一行图片的顶部margin */
.show:first-child .soot {
  margin-top: 0;
}

/* 去掉最后一行图片的底部margin */
.show:last-child .soot {
  margin-bottom: 0;
}

补充说明 #

• 方案一的gap是Flex布局的原生属性，只会在元素之间产生间距，不会影响容器边缘，代码更简洁易维护。
• 方案二通过负margin和选择器定位边缘元素，适合需要兼容老旧浏览器的场景。

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