Conceitos padding e margin

Olá Tauany, tudo bem?

A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas, ou seja, o espaçamento interno. Já o margin, irá definir a distância a partir da borda de um elemento até outro elemento, sendo assim, o espaçamento externo.

Vamos entender melhor esses conceitos através do esquema!

Parte 1: HTML

Iremos criar 3 divs que irão representar 3 quadrados coloridos.

    <div class="q1">Quadrado 1</div>
    <div class="q2">Quadrado 2</div>
    <div class="q3">Quadrado 3</div>

Parte 2: CSS

Iremos criar esses quadrados dando a eles uma altura, largura e estilizaremos com bordas, margens externas e internas.

div {
    width: 200px;
    height: 200px;
    border: 10px solid salmon;
    margin: 50px;
    padding: 30px;
    font-size: 30px;
}

No esquema a seguir, irei mostrar como se comportam as propriedades margin e padding no nosso exemplo.

margin: 50px

O margin é representado no esquema com essa cor que preenche todo o elemente externamente, do lado de fora da borda.

padding: 30px

O padding é representado no esquema por esse respiro entre o conteúdo escrito e a borda, configurando um espassamento interno.

No dia a dia do desenvolvimento, você perceberá que existem situações em que não há cor de fundo ou borda e isso dificulta o mapeamento de onde estão esses dois tipos de espassamentos, mas ainda assim eles estão presentes e a ferramenta do desenvolvedor (F12) é uma ótima aliada para nos ajudar a encontrá-los.

(continua...)

Um exemplo prático de utilização do padding e do margin, é o da página de produtos que será desenvolvida durante os cursos de HTML e CSS aqui da Alura. Veja:

margin

padding

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!