本文详解如何在 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 方案：
.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 干净间距，列间无重叠，响应式表现稳定。
