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 是如何决定像素数的呢？我不认为 position: relative 可能与它有任何关系。

Answer 1

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

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

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