Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Espaçamento entre footer e main

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Conteúdo externo e atividade Importando vídeo

por Bruno Heinzelmann Vieira
| 39.3k xp | 2 posts

Por que o seguinte CSS abaixo não gera espaço em branco entre o footer e main quando modifico a margem da classe .video:

.beneficios-principal
{
    padding: 3em 0;
    background: #888888;
}

Mas caso utilize o seguinte css abaixo é adicionado um espaço em branco quando tento modificar a margem da classe .video?

.beneficios-principal
{
    margin: 0 auto;
    background: #888888;

}

Segue a classe video:

.video
{
    margin: 2em auto;
    background: #888888;
    width: 640px;
}

Imagens com e sem o espaço https://drive.google.com/file/d/1PR5PrtWf59pZ4Ut43IAz8M3YnHb8JEgd/view?usp=sharing

https://drive.google.com/file/d/1l02K5uooEsnSwATh2pMdYLxMZTPk5k2b/view?usp=sharing

Código: https://drive.google.com/drive/folders/1m3fBoKfMzulnF-9pDdiXmVpAirL7Nt1q?usp=sharing ` Gostaria de entender o que gera este comportamento.

2 respostas
solução!
por Vinicius Almeida
| 40.6k xp | 10 posts
Designer

Tudo bem, Bruno?

O primeiro código não gera espaço em branco porque o padding é o espaço interno entre o elemento e sua borda, ou seja, esse espaço ficará com a cor do background #888888.

Caso você deixe apenas espaço de margin, sem o padding, então literalmente o background cinza termina junto com o vídeo, que é o último elemento do

. Daí a margin atua empurrando externamente o pra baixo. Além disso faço um adendo que se tratando de espaçamentos na vertical, margin com margin não se soma, é mostrada apenas a que tem o valor mais alto.

Me diz aí se consegui tirar a sua dúvida, cara. Abraços,

por Vinicius Almeida
| 40.6k xp | 10 posts
Designer

Agora que eu percebi que na minha resposta foram cortadas as tags que escrevi entre < >. O correto é: "...que é o último elemento do main." "... a margin atua empurrando o footer pra baixo."