Introdução às Margens CSS
Este arquivo demonstra os conceitos de margem (margin), margens individuais, atalhos,
auto e colapso vertical, conforme ensinado na aula.
1. Margens Individuais (margin-top/right/bottom/left)
Elemento Padrão (Margin 20px bottom)
Margens Individuais (15px top, 40px right, 5px bottom, 30px left)
Elemento Padrão (Margin 20px bottom)
2. Propriedade Abreviada (margin)
Atalho 4 Valores: T(10) R(20) B(30) L(40)
Atalho 2 Valores: T/B(15) L/R(50)
3. Centralização com margin: auto (Largura Definida)
Elemento Centralizado (margin: auto; width: 300px;)
4. Margens Negativas
O elemento abaixo tem uma margem negativa, que o puxa para fora de seu espaço normal:
Elemento Padrão
Margem Negativa (-10px top/left)
Elemento Padrão
5. Colapso de Margem Vertical
A margem entre o H3 e o P abaixo colapsa para o maior valor (50px), e não a soma (70px).
H3 com margin-bottom: 50px;
Parágrafo com margin-top: 20px; (Espaçamento visível = 50px)