为什么设置margin-left: auto可以让块级元素实现向右对齐效果？

问题对应的代码示例 #

<style>
.box {
  border: solid 1px;
  text-align: center;
  width: 200px;
  margin-left: auto;
}
</style>

<div class="box">
  <strong>107</strong> Retweets
</div>

原理说明 #

这个效果是CSS水平方向盒模型的计算规则决定的，仅对定宽的正常流块级元素生效：

• W3C规范明确规定了水平排版下，块级元素的水平方向总宽度必须满足等式：

父元素内容区宽度 = 子元素 margin-left + border-left + padding-left + 内容宽度width + padding-right + border-right + margin-right

• 你代码里的.box已经设置了固定宽度200px，当你只指定margin-left: auto、margin-right保持默认的0时，为了满足上面的等式，浏览器会把父容器扣除200px宽度后剩余的所有水平空间，全部分配给margin-left，左侧的外边距就会把整个元素推到父容器的最右侧，实现右对齐效果。
• 你之前了解的margin: auto实现水平居中，本质是左右margin都被设为auto，剩余的水平空间会平均分配给左右两侧的外边距，自然就实现了居中。

内容的提问来源于stack exchange，提问作者Uzair Ahmed Nasir