Alinhamento de elemento de bloco com recuo à esquerda em CSS
O valor auto para margin
na verdade pode fazer mais do que apenas centralizar.
Essencialmente, esse valor permite calcular a
margem automaticamente e torná-la a máxima
possível. Quando aplicamos auto para
as margens esquerda e direita - o elemento
é centralizado.
No entanto, é possível aplicar apenas a margem esquerda. Nesse caso, o elemento receberá o recuo máximo possível à esquerda e ocupará a posição extrema direita:
<div class="parent">
<div class="child"></div>
</div>
.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
margin-left: auto; /* define a margem esquerda automática */
height: 100px;
width: 200px;
border: 1px solid green;
}
: