Qual a Diferença Entre Padding e Margin?

Saiba quais as diferenças dessas duas propriedades de CSS importantíssimas na configuração de uma página web.

Nesse artigo, falaremos um pouco sobre Html e CSS, em especial sobre duas propriedades muito utilizadas, padding e margin. Apesar das duas terem funções parecidas, cada uma tem sua particularidade de configuração dentro de um elemento Html, e, o que vamos mostrar aqui é para que serve e como cada uma delas deve ser usada.

Padding – Determina o espaço interno, sendo responsável por determinar a distância entre o conteúdo e a borda.

Margin – Essa propriedade determina o espaço externo, ou seja, a distância de determinado elemento com outros elementos de uma página.

Voltando na imagem de apresentação e prestando atenção nela você poderá ter uma melhor ideia do que foi citado. Na imagem, também estão contidas informações de direcionamento, ou seja, as posições referentes a direita, esquerda, acima e abaixo tanto em padding como em margin. Para que você entenda melhor, tanto padding como margin seguem o sentido horário para sua configuração, sendo que o primeiro valor é para a superior, em seguida a direita, depois a parte inferior e finalmente a esquerda.

“Top = Superior , Right = Direita , Bottom = Inferior , Left = Esquerda”

Tire suas dúvidas completamente nos exemplos a seguir:

padding:7px 20px 7px 20px;

- padding top é 7px 

- padding right é 20px 

- padding bottom é 7px 

- padding left é 20px  

margin: 30px 8px 30px 8px;

- margin top é 30px

- margin right é 8px

- margin bottom é 30px

- margin left é 8px

* Se você definir um único valor, a distância será aplicada em todos os quatro lados do elemento Html.

EX: padding:10px; ou margin:10px;

Como essa configuração, tanto padding quanto margin terão a distância de 10px para superior, direita, inferior e esquerda.

Entendeu um pouco sobre padding e margin? Se você desejar partir para o “mundo” de programação irá ouvir muito sobre essas duas propriedades de CSS que determinam a distância entre elementos e poder dominá-las já é uma grande evolução para quem comece nesse meio.

E você já sabe utilizar padding e margin em seus trabalhos? Deixe seu comentário, pois ele é a motivação para nosso trabalho.