CSS margin-auto layout mystery

Question

I have been working through a React tutorial and have some knowledge of CSS but am confused about what property is causing a certain layout detail.

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

There is a an element with some Font Awesome classes which is where my confusion lies.

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

I can't figure out the CSS properties that causes the margin left on the i element that moves it all the way to the right.

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

I can tell the margin-left:auto is what sets the margin but how does the auto come to decide the number of pixels? I'm don't think the position: relative could have anything to do with it.

Possible duplicate of [What does margin auto mean?](https://stackoverflow.com/questions/26230880/what-does-margin-auto-mean) — Temani Afif, Jan 06 '18 at 07:47
you can refer this: https://www.w3schools.com/cssref/pr_margin.asp — Shivani Shanishchara, Jan 06 '18 at 11:59

score 2 · Accepted Answer · answered Jan 06 '18 at 05:51

The property value "auto" is used to horizontally center an element within its container.

Most of this depends on the element size; i.e. width. When you set auto for only margin-left, it means that element will be centered from the left side only, meaning that the margin left will be added to center the element horizontally, until its width reaches the other side (see B). This is unless there is an additional margin-right in pixel set, which will be applied (see E). The same when using margin-right auto (see C).

When we use auto for both left and right; i.e. margin : auto, the element will be be equally centered on both sides; half of the width of each side (see D).

CSS margin-auto layout mystery

1 Answers1