CSS margin-auto布局之谜

Question

我一直在研究React教程，并且对CSS有一些了解，但对于什么属性导致某个布局细节感到困惑。

https://codepen.io/jackoliver/pen/qNwrrp

有一个带有一些Font Awesome类的元素，这是我的困惑所在。

<button>Log in <i className="fa fa-fw fa-chevron-right"></i></button>

我无法弄清楚导致i元素上留下边距的CSS属性一直向右移动。

.fa {
    font-size: 12px;
    margin-left: auto;
    position: relative;
    top: 1px;
}

我可以告诉margin-left：auto是设置边距的，但是auto是如何决定像素数的？我不认为这个位置：亲戚可能与它有任何关系。

Answer 1

属性值“auto”用于水平center an element within its container。

这大部分取决于元素大小;即宽度。 当您仅为margin-left设置auto时，意味着元素将仅从左侧居中，这意味着左边距将被添加以使元素水平居中，直到其宽度到达另一侧（参见B）。这是除非在像素集中存在额外的边距权限，否则将应用（参见E）。使用margin-right auto时也一样（见C）。

当我们左右使用auto时;即边距：自动，元素将在两侧同等居中;每边宽度的一半（见D）。