如何在无法修改父div的前提下让margin-left自动填充父容器剩余空间

解决方案 #

给img元素新增两个样式属性即可实现需求：

• display: block：将img从默认的行内替换元素转为块级元素，触发块级元素的水平auto margin计算规则
• margin-left: auto：自动分配父容器剩余水平空间到左外边距

修改后的代码如下：

<div>
     <img style={{width:'10px', marginRight:'20px', display: 'block', marginLeft: 'auto'}}/>
</div>

原理解释 #

块级元素的水平方向尺寸遵循如下计算公式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区宽度
当只有margin-left设置为auto，其余值均为固定值时，所有剩余的空间会全部分配给margin-left，完全匹配你需要的计算规则：

• 父div宽度100px时：100 - 10（img宽度） -20（margin-right）=70px，自动赋值给margin-left
• 父div宽度40px时：40 -10 -20 =10px，自动赋值给margin-left

内容的提问来源于stack exchange，提问作者Albert Hoffman