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.
Top -
Soluções Web
