拆分div容器后如何为图片添加25px有效间距？

你当前的问题是图片没有限制宽度，导致溢出子div，把padding的空间完全盖住了，所以看不到预期的间距。另外float布局下的width计算也需要配合内容自适应，下面给你几种实用的解决方法：

方法1：让图片适配子容器，保留padding设置 #

给图片添加max-width: 100%;样式，这样图片会自动缩放到子div的内容区宽度（因为你设置了box-sizing: border-box，子div的width已经包含了padding），相邻子div的左右padding会共同形成50px的间距（每个子div左右各25px）。

修改后的CSS代码：

* {
  box-sizing: border-box;
}

.col-1-3 {
  width: 33.333%;
  float: left;
  padding: 0 25px;
}

/* 新增图片自适应样式 */
.col-1-3 img {
  max-width: 100%;
  height: auto; /* 保持图片原有比例 */
}

.test {
  margin: 0 auto;
  width: 1700px;
  border: 1px solid red;
}

.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

方法2：用margin替代padding，精确计算宽度 #

如果更倾向用margin实现间距，可以给子div设置右侧margin，同时用calc()计算正确的宽度，避免总宽度超出父容器。三个子div之间有2个间距，总间距为50px，所以每个子div的宽度应为calc((100% - 50px)/3)，最后一个子div去掉右侧margin即可。

CSS代码：

* {
  box-sizing: border-box;
}

.col-1-3 {
  width: calc((100% - 50px)/3);
  float: left;
  margin-right: 25px;
}

/* 移除最后一个子元素的右侧margin */
.col-1-3:last-child {
  margin-right: 0;
}

.col-1-3 img {
  max-width: 100%;
  height: auto;
}

.test {
  margin: 0 auto;
  width: 1700px;
  border: 1px solid red;
}

.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

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

Flex布局比float更简洁，无需手动计算宽度和处理清除浮动，直接给父容器设置display:flex和gap:25px就能实现子元素间的均匀间距。

修改后的CSS代码（HTML结构无需改动，还能去掉clearfix类）：

* {
  box-sizing: border-box;
}

.test {
  margin: 0 auto;
  width: 1700px;
  border: 1px solid red;
  display: flex; /* 启用Flex布局 */
  gap: 25px; /* 设置子元素之间的间距 */
}

.col-1-3 {
  flex: 1; /* 让三个子div平分父容器的可用宽度 */
}

.col-1-3 img {
  max-width: 100%;
  height: auto;
}

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