Allineamento di un elemento a blocco con margine sinistro in CSS

Il valore auto per margin in realtà non serve solo per centrare. Essenzialmente, questo valore permette di calcolare il margine automaticamente e renderlo il più ampio possibile. Quando impostiamo auto per i margini sinistro e destro - l'elemento risulta centrato.

Si può, tuttavia, impostare solo il margine sinistro. In questo caso, l'elemento otterrà il margine sinistro massimo possibile e occuperà la posizione più a destra:

html<div class="parent">
  <div class="child"></div>
</div>

css.parent {
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  margin-left: auto; /* impostiamo il margine sinistro automatico */
  height: 100px;
  width: 200px;
  border: 1px solid green;
}

Результат: