Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Div alinhada ao centro

O professor criou uma div para pôr o inframe do vídeo, apenas. Quando ele criou essa div, estilizou ela no css com o código abaixo:

.video { width: 560px; margin: 1em auto; }

Estaria certo dizer que a div se adapta ao tamanho do que está dentro dela?

Nesse caso não entendi o que acontece quando se utiliza o "auto". Pois a div se centraliza, mesmo que não tenha nenhuma referência criada antes no código, para as laterais. Digo, não preciso criar nada como referência lateral para a div?

Estaria certo dizer que ela vai criar uma distância entre direita e esquerda da página, e os lados do que está dentro dela, mas não ela mesma?

2 respostas

Olá Héron, boa tarde!

Sempre que utilizar as propriedades dentro do padding e maring, lembre-se desta colinha:

/* Aplica para todos os quatro lados */
margin: 1em;

/* vertical | horizontal */
margin: 'valor vertical' 'valor horizontal;
maring: 1em auto;

/* topo | horizontal | inferior */
margin: 'valor topo' 'valor horizontal' 'valor inferior';
margin: 1em auto 1em;

/* topo | direita | inferior | esquerda */
margin: 1em 1em 0 auto;

/* Valores globais */
margin: inherit;
margin: initial;
margin: unset;

A ideia principal para utilizar este recurso é sempre mater o layout centralizado, independente da viewport.

solução!

Olá!

Obrigado pelo retorno.

Minha pergunta era sobre o comportamento da div... Mas já encontrei a resposta, o que acontecia era porque o "main" estava com a margin em "auto", refletindo em tudo que estava dentro dele...

Em uma das aulas posteriores ele toca nesse detalhe.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software