CSS›  

Diferença entre margin e padding

2 Comente abaixo Nícolas Müller (@nicolas_muller)

Saiba a diferença entre margin e padding no css, muito utilizado em programação tableless.

Olá pessoal
Neste artigo vamos ver a diferença entre margin e padding.

Padding é a quantidade de pontos que o conteúdo de um objeto fica identado no objeto, ou seja é o número de pontos em que o conteúdo está recuado dentro do objeto externo.

Utilização:

padding:10px 2px 15px 0px

padding-left:0px;

padding-right:2px;

padding-bottom:15px;

padding-top:10px;

padding:10px 0px;


Utilizando apenas padding, você deve informar os quatro cantos, sendo eles respectivamente (acima, direita, abaixo, esquerda). Ou como no último caso que o padding será para 10px de padding vertical, 0px de padding horizontal.
Ex.:


Margin é a quantidade de pontos em que um objeto está recuado do conteúdo, por exemplo.

Utilização:

margin:10px 2px 15px 0px

margin-left:0px;

margin-right:2px;

margin-bottom:15px;

margin-top:10px;

margin:10px 0px;


Utilizando apenas margin, você deve informar os quatro cantos, sendo eles respectivamente (acima, direita, abaixo, esquerda). Ou como no último caso que o margin será para 10px de margin vertical, 0px de margin horizontal. Mesma regras de utilização do padding.
Ex.:


Isso ae pessoal, está utilização é muito comum em programação html com tableless.

Qualquer dúvida, comente a coluna abaixo, que estarei respondendo!!!

 

Compartilhe com seus amigos:
Mais de CSS
  • CSS: Design responsivo para menu, imagem e publicidade
    CSS: Design responsivo para menu, imagem e publicidade
  • Design responsivo com CSS3
    Design responsivo com CSS3
  • O que é tableless e como funciona essa metodologia?
    O que é tableless e como funciona essa metodologia?
  • Regras para como separar o HTML do CSS
    Regras para como separar o HTML do CSS
  • CSS Font-size: px, em, %, pt ou keyword?
    CSS Font-size: px, em, %, pt ou keyword?
Compartilhe com seus amigos:
últimos reviews
  • 8,4
    Review Samsung Galaxy K Zoom
    Nessas 2 últimas semanas passou por nossas mãos o potente Galaxy K Zoom, veja o que achamos dele.
  • 8,6
    Review Moto X - Segunda geração
    O aparelho da Motorola é a prova “viva” que o que está ótimo pode melhorar ainda mais.
  • 8,1
    Review Zenfone 5
    Tela de 5 polegadas, câmera de foto e vídeo superiores aos concorrentes, boa usabilidade e preço baixo. A Asus acertou n...

TOPO