如何实现元素间有内边距但无侧边留白，保持标题与卡片对齐？

通用方案（适配任意行列数） #

不用给每个子卡片硬写不同padding，下面两种方法都能实现「子元素间有间距，左右边缘和标题对齐」的效果，还能适配任意数量的卡片和行列数：

方法1：Flex Gap 布局（最简洁，推荐）

直接用Flex的gap属性控制子元素间距，替代原来给column加的padding，天然避免侧边留白：

修改后的CSS代码：

.content-card {
  width: 100%;
  padding: 2em; /* 简化上下左右内边距写法 */
  background: black;
}

.service-card {
  max-width: 100%;
  padding: 1em;
  background: grey;
  border-radius: 0.25em;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em; /* 控制子元素间的水平+垂直间距 */
}

.column-2x2 {
  display: flex;
  flex-direction: column;
  flex-basis: calc(50% - 0.5em); /* 减去gap的一半，保证2列刚好填满宽度 */
  /* 移除原来的padding */
}

说明：

• gap:1em直接设置子卡片之间的水平、垂直间距，无需给column加padding，自然不会出现侧边留白
• calc(50% - 0.5em)是因为2列平分宽度时，要减去gap的一半（总gap为1em，每列占0.5em的间隙），避免卡片换行

方法2：负Margin 兼容旧浏览器

如果要兼容不支持gap的旧浏览器，可以用负Margin抵消容器内边距：

修改后的CSS代码：

.content-card {
  width: 100%;
  padding: 2em;
  background: black;
  overflow: hidden; /* 防止负Margin导致内容溢出 */
}

.service-card {
  max-width: 100%;
  padding: 1em;
  background: grey;
  border-radius: 0.25em;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -2em; /* 负Margin抵消content-card的左右内边距 */
}

.column-2x2 {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
  padding: 1em 2em 1em; /* 左右padding和content-card的内边距一致，保证对齐 */
  box-sizing: border-box; /* 确保padding不会撑宽元素 */
}

说明：

• margin:0 -2em让row的左右边缘和content-card对齐，抵消掉content-card的2em内边距
• column的左右padding设为2em，既能让子卡片和标题对齐，又能通过相邻column的padding形成间距（如需调整间距，修改column的左右padding值即可）

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