本文详解如何在 Flex 容器中正确设置三列布局内图片的外边距（top/left/right 各 20px），解决 margin-right 失效、margin-left 导致列重叠等常见布局问题。

本文详解如何在 flex 容器中正确设置三列布局内图片的外边距（top/left/right 各 20px），解决 `margin-right` 失效、`margin-left` 导致列重叠等常见布局问题。

在当前代码中，.row 使用了 display: flex，但子元素 .column 却错误地设为 display: inline-block —— 这会破坏 Flex 的弹性行为，导致 margin 计算异常（如 margin-right 被忽略、margin-left 推动整个块而非仅调整内部图片位置）。根本解法是让所有列成为真正的 Flex 子项，并统一使用 flex: 1 实现等宽分布。

以下是优化后的完整 CSS 方案：

Vidu Claw

一款AI视频创作工具，主要用于Vidu AI打造的多模态AI视频创作智能体，内置Vidu Skills，支持OpenClaw调用，适合需要提升相关任务效率的用户。

下载

.row {
  display: flex;
  max-width: 1060px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 30px;
  box-sizing: border-box;
}

.column {
  flex: 1; /* ✅ 替代 width: 33.33% + inline-block，使列自动均分容器宽度 */
  min-height: 500px;
  border: 5px solid #F8F8F8;
  box-sizing: border-box;
  padding: 0 20px; /* 可选：为列内容预留左右内边距，避免图片紧贴边框 */
}

.title {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 30px;
  font-weight: 100;
  border-left: 5px solid #d54126;
  padding-left: 13px;
  margin: 10px 0;
}

.column img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px 20px 0; /* ✅ top: 20px, right: 20px, bottom: 0, left: 20px */
}

关键改进说明：

• 移除 display: inline-block：避免与父级 flex 冲突，确保 .column 正确响应 flex: 1；
• margin: 20px 20px 0 精准生效：因图片为 display: block 且父列无 overflow: hidden 或浮动干扰，此时左右外边距将严格作用于图片自身边界；
• 可选增强体验：在 .column 上添加 padding: 0 20px，可防止图片 margin-left/right 与列边框重叠，提升视觉一致性；
• 注意兼容性：flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，现代浏览器均支持，无需额外前缀。

✅ 最终效果：每张图片在各自列中顶部、左侧、右侧均保持 20px 干净间距，列间无重叠，响应式表现稳定。