Entrar Ainda não tem acesso?
1
resposta

Espaçamento entre footer e main

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas, no capítulo Tipos de campos diferentes e atividade CSS para formulários complexos

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 `

1 resposta
por Daniela Oliveira Caus
| 45.4k xp | 13 posts

Oi, Bruno!

Essa é a diferença entre o padding e o margin!

O margin especifica o espaço externo entre o elemento que você está definindo e os outros. É o espaço que tem fora da borda do seu elemento.

Já o padding define o espaço que deve haver entre a borda e o que está dentro do elemento. Como você colocou o fundo cinza dentro do seu elemento, esse espaço até o footer é cinza. Mas ele não tem espaço de margem (pra fora da borda do seu elemento), por isso fica encostado no footer.

Tem uma resposta bacana aqui no fórum sobre isso, se te ajudar: https://cursos.alura.com.br/forum/topico-diferenca-entre-padding-e-margin-160396