Posicionamento Com CSS
Padding
Utilizamos a propriedade padding para definir um espaçamento interno do elemento, ou seja, da borda para dentro. Temos uma distância entre o elemento e seu conteúdo acima, à direita, abaixo e à esquerda respectivamente.
- Se passado somente um valor, esse mesmo valor é aplicado em todas as direções.
- Se passados dois valores, o primeiro será aplicado acima e abaixo e o segundo será aplicado à direita e à esquerda.
- Se passados três valores, o primeiro será aplicado acima, o segundo será aplicado à direita e à esquerda e o terceiro valor será aplicado abaixo do elemento.
- Se passados quatro valores, serão aplicados respectivamente a padding-top, padding-right, padding-bottom e padding-left.
Margin
A propriedade margin adiciona espaço após o limite do elemento, ou seja, é um espaçamento externo. Assim como no exemplo do padding se passado somente um valor, esse mesmo valor é aplicado em todas as direções. E assim sucessivamente.
| Padding e Margin | Direção |
|---|---|
| padding 10px | Todas as Direções |
| padding 20px 5px | Acima e Abaixo - Direita e Esquerda |
| padding 14px 4px 10px | Acima - Direita e Esquerda - Abaixo |
| padding 8px 10px 5px 12px | Acima - Direita - Abaixo - Esquerda |
| margin 20px | Todas as Direções |
| margin 10px 8px | Acima e Abaixo - Direita e Esquerda |
| margin 5px 14px 20px | Acima - Direita e Esquerda - Abaixo |
| margin 20px 5px 10px 12px | Acima - Direita - Abaixo - Esquerda |
| Conceitos | |
