本文详解如何在 Flex 容器中正确为每列内的图片设置统一的 20px 上、左、右外边距，解决因混用 display: inline-block 与 Flex 导致的 margin 失效和元素重叠问题。
本文详解如何在 flex 容器中正确为每列内的图片设置统一的 20px 上、左、右外边距，解决因混用 `display: inline-block` 与 flex 导致的 margin 失效和元素重叠问题。
在您当前的 CSS 中，.row 使用了 display: flex，但子元素 .column 却声明了 display: inline-block —— 这会破坏 Flex 的布局逻辑，导致 margin-right 无效、margin-left 反向偏移甚至跨列重叠。根本原因在于：Flex 子项不应再手动设置 inline-block 或 float 等传统布局方式，而应由 Flex 自身控制尺寸与间距。
✅ 正确做法是：
- 移除 .column 的 display: inline-block 和固定 width: 33.33%；
- 改用 flex: 1 让三列等宽自适应（同时兼容响应式）；
- 保留 box-sizing: border-box 确保边框与内边距不撑大容器；
- 图片 margin: 20px 即可实现「上、左、右各 20px」效果（margin-bottom 设为 0 或按需调整）。
以下是优化后的完整代码：
.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;
/* 可选：添加 padding 避免内容紧贴边框 */
padding: 0 15px;
}
.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; /* ✅ 上/左/右 = 20px，下 = 0 */
}⚠️ 注意事项：
- 若需严格控制图片高度（如统一缩略图），建议补充 object-fit: cover 并设定固定 height；
- margin: 20px 20px 0 等价于 margin: 20px 20px 0 20px，符合 CSS 边距简写规范；
- 避免在 .column 中混用 width 与 flex，否则 Flex 优先级更高，width 可能被忽略；
- 如需列间留白（而非仅靠图片 margin），推荐使用 gap: 20px（作用于 .row），语义更清晰且不影响子元素盒模型。
通过以上调整，图片将稳定居中于各列内，且严格保持 20px 顶部、左侧与右侧间距，彻底规避重叠与 margin 失效问题。
