Eu comecei meus estudos sobre HTML5 e CSS há alguns dias e estou realmente interessado em empolgado com as possibilidades que eles oferecem. Porém, durante meus estudos, me deparei com dois elementos: o padding e o margin.
Eu fiz algumas comparações entre eles para ver as diferenças, mas ainda assim eu não me sinto seguro em utilizá-los. Além disso, o material que utilizo também não foi muito claro nesses dois pontos.
Poderiam, por gentileza, me dar uma luz quanto à utilização desses dois elementos? Desde já agradeço!
Olá Pedro. Já passei pelo mesmo problema quando estava começando.
Vou tentar explicar simplificadamente:
Todo elemento html (h1, div, section, img, etc) é como se fosse um “quadrado” composto de CONTEUDO, PADDING, BORDER e MARGIN.
A imagem mostra como esta estrutura é organizada:
BORDER seria como uma divisão entre o conteúdo do “quadrado”, ou seja o que esta dentro dele, e o resto do documento.
PADDING é o espaço que o conteúdo ocupa dentro do border, ou seja dentro do “quadrado”.
MARGIN é o espaço entre o “quadrado” e os demais elementos do documento html. Enquanto mais margin, mais distância o “quadrado” terá dos outros elementos.
Recomendo que dê uma olhada nos materiais abaixo, caso eu não tenha sido muito claro:
