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>

Answer 1

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>