如何为 Flex 布局中的列内图片设置统一的 20px 顶部 左右外边距

本文讲解如何在 Flex 容器中正确为每列内的图片添加 20px 的上、左、右外边距，解决 margin-right 失效及 margin-left 导致列重叠的问题，并通过优化 CSS 布局逻辑实现响应式、无重叠的三列图片展示。

本文讲解如何在 flex 容器中正确为每列内的图片添加 20px 的上、左、右外边距，解决 `margin-right` 失效及 `margin-left` 导致列重叠的问题，并通过优化 css 布局逻辑实现响应式、无重叠的三列图片展示。

问题根源在于 .column 同时使用 display: inline-block 和父容器 .row 的 display: flex 存在冲突：inline-block 元素在 Flex 容器中会失去 Flex 项目的默认行为，导致 margin 计算异常（如 margin-right 被忽略），且宽度控制失效，进而引发列间重叠。

✅ 正确解法是让 .column 成为真正的 Flex 子项，移除 inline-block，改用 flex: 1 实现等宽分布，并确保 box-sizing: border-box 统一包含边框与内边距：

.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; /* 关键：使三列均分容器宽度 */  border: 5px solid #F8F8F8;  box-sizing: border-box;  min-height: 500px; /* 可保留，用于最小高度约束 */}.column img {  display: block;  max-width: 100%;  height: auto;  margin: 20px 20px 0; /* 上、左、右 = 20px；下边距设为 0 避免底部冗余间距 */}

⚠️ 注意事项：

• 不要混用 inline-block 与 flex 父容器——Flex 子项应直接由 Flex 属性（如 flex, flex-grow）控制布局；
• margin: 20px 等价于 margin: 20px 20px 20px 20px，但此处建议显式写为 margin: 20px 20px 0，因图片下方通常无需额外边距，且可避免 .column 内容整体下移；
• 若需严格控制图片尺寸，可在 img 上补充 object-fit: cover 或设定固定 height，但当前 max-width: 100% + height: auto 已能良好适配响应式场景；
• 所有 margin、padding 和 border 均受 box-sizing: border-box 约束，确保 .column 的 width（由 flex: 1 分配）包含边框，避免溢出。

最终效果：三列等宽分布，每列图片顶部、左侧、右侧均精准留出 20px 空白，无重叠、无塌陷，且在不同屏幕宽度下保持稳定结构。