本文详解如何在 flex 容器中正确为每列内的图片添加统一的 20px 外边距（上、左、右），解决因 display 冲突导致 margin-right 失效、margin-left 引发重叠等常见布局问题。
本文详解如何在 flex 容器中正确为每列内的图片添加统一的 20px 外边距（上、左、右），解决因 display 冲突导致 margin-right 失效、margin-left 引发重叠等常见布局问题。
在当前代码中，.row 使用 display: flex，但子元素 .column 却设置了 display: inline-block，这会破坏 Flex 的正常流式分配机制——Flex 子项应由 Flex 容器直接控制布局，而非自行采用行内块行为。因此，margin-right 在 .column img 上看似“无效”，实则是父容器 .column 的宽度未被 Flex 正确约束（width: 33.33% 与 inline-block 共存易引发盒模型计算偏差），导致图片右侧外边距被挤压或忽略；而 margin-left: 20px 反向推动图片右移，则可能超出其父列边界，进而视觉上“覆盖”相邻列。
✅ 正确解法是统一使用 Flex 布局语义：移除 .column 的 display: 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; /* ✅ 替代 width + inline-block，实现等宽自适应 */
border: 5px solid #F8F8F8;
box-sizing: border-box;
/* 移除 min-height: 500px（若需高度一致性，建议用 min-height 或 aspect-ratio 控制） */
}
.title {
font-family: 'Nunito Sans', sans-serif;
font-size: 30px;
font-weight: 100;
border-left-style: solid;
border-left-width: 5px;
border-color: #d54126;
padding-left: 13px;
margin: 10px 0;
}
.column img {
display: block;
max-width: 100%;
height: auto;
margin: 20px; /* ✅ 简洁写法，等价于 margin: 20px 20px 0 20px */
}
⚠️ 关键注意事项：
- 不要混用布局模式：Flex 容器下，子项应避免 inline-block、float 或固定 width（除非配合 flex: none 显式禁用伸缩）；
- margin: 20px 已涵盖上/右/下/左，若需底部留白为 0，可明确写为 margin: 20px 20px 0；
- 图片默认为 inline 元素，易受基线对齐影响，display: block 是必需实践；
- 若列内容高度不一致，align-items: center 可能导致图片垂直居中偏移，此时建议将 .column 设为 display: flex; flex-direction: column 并用 align-items: flex-start 精确控制图片对齐。
最终效果：三列等宽分布，每张图片严格保持顶部、左侧、右侧各 20px 外边距，且互不干扰——布局稳健、语义清晰、响应友好。
