如何移除首尾card容器侧边内边距并保持所有卡片等宽？

问题分析 #

当前通过给每个card-container设置左右8px内边距实现卡片间16px间距，但这会导致卡片组左右两侧出现间隙。直接移除首尾卡片的内边距会让这两张卡片的内容宽度变大（内边距原本占用了空间），破坏卡片宽度一致性。

方案1：使用Flexbox Gap属性（推荐，现代浏览器支持） #

利用Flexbox的gap属性直接设置卡片间的间距，该属性只会在元素之间添加间隙，不会影响外侧边缘。同时通过box-sizing: border-box确保内边距不干扰元素宽度计算。

修改后的CSS代码：

* {
  box-sizing: border-box; /* 全局设置，让内边距和边框计入元素宽度 */
}

body {
  margin: 0;
}

.wrapper {
  display: flex;
  gap: 16px; /* 设置卡片间16px间距 */
}

.card-container {
  flex: 1; /* 让所有卡片平分可用宽度，保持尺寸一致 */
}

.card-container .card-content {
  height: 150px;
  width: 100%;
  background-color: lightblue;
}

方案2：调整外边距和宽度（兼容旧版浏览器） #

通过外边距实现卡片间距，同时使用calc()计算卡片宽度，抵消首尾卡片的外边距影响。

修改后的CSS代码：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.wrapper {
  display: flex;
}

.card-container {
  margin-right: 16px; /* 所有卡片右侧添加16px间距 */
  width: calc( (100% - 3 * 16px) / 4 ); /* 总宽度减去3个间隙后平分给4张卡片 */
}

/* 移除最后一张卡片的右侧外边距 */
.card-container:last-child {
  margin-right: 0;
}

.card-container .card-content {
  height: 150px;
  width: 100%;
  background-color: lightblue;
}

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