When I am giving margin 0 0 0 auto, it should go to extreme right but no style is applied in output

Question

In margin the last one is for left in this case, and therefore in this situation it is given as auto.So it should be at its extreme right. But its not happening. I want to know the logic behind this.

.follow-btn {
    margin: 0 0 0 auto ;
 }

<div class="follow-btn">
    <button>Follow</button>
 </div>

The value `auto` does not make it go "extreme right". Here, check out [this article](https://www.hongkiat.com/blog/css-margin-auto/), it states: _"A width of value auto will have 0px margins. A block element’s width typically covers its container’s when it is auto or 100% and hence a margin auto will be computed to 0px in such a case."_. Your div `follow-btn` has a default width of 100% since you did not set it and it is a block element. — zgood, Sep 06 '20 at 15:16

score 1 · Answer 1 · edited Sep 06 '20 at 20:07

You’re applying the margin to a div, which fills the entire width of the page by default. So, to make sure the auto margin on the left side pushes it to the right, you could give a specified width, so it actually floats to the right.

So that changes your example:

.follow-btn {
  margin: 0 0 0 auto;
  background: red; /* just to show the effect on the div */
}

<div class="follow-btn">
    <button>Follow</button>
</div>

To this:

.follow-btn {
  margin: 0 0 0 auto;
  background: red; /* just to show the effect on the div */
  width: 4em;
}

<div class="follow-btn">
    <button>Follow</button>
</div>

When I am giving margin 0 0 0 auto, it should go to extreme right but no style is applied in output

1 Answers1