Entendendo CSS - O padding - Parte 2

Continuando com a segunda parte da série Entendendo CSS, hoje eu vou explicar como utilizar o padding do CSS. Para quem sabe oque o padding causa no blog pode parecer que não deve explicar isso, mas ele muitas das vezes se não usar corretamente pode te prejudicar e prejudicar ao blog - Fazendo com que alguns objetos fiquem fora do lugar!

PRIMEIRO, OQUE O PADDING FAZ NO BLOG ?

A propriedade para espaçamentos (alguns traduzem como "enchimento"), define um valor para os espaçamentos entre o conteúdo e as bordas dos elementos HTML.
 Existe 4 tipos de padding, confira:

• padding-top..........define a espaçamento superior;

• padding-right........define a espaçamento direita;

• padding-bottom.......define a espaçamento inferior;

• padding-left.........define a espaçamento esquerda;

• padding..............
maneira abreviada para todas os espaçamentos

Via Majour.com

 AGORA, COMO USAR CORRETAMENTE ?

Para usar o padding, devemos tomar muito cuidado com as medidas que colocamos no blog. Ao usar o padding temos que subtrair o valor do mesmo pelo valor das medidas do blog, veja os exemplos:
Analisando o código exemplar abaixo, ele tem a parte HTML e a CSS ligadas a ele.


<div id="topo">
<div id="dentrotopo">
<img src="img/logomarca.jpg" alt="Denis Gomez" />
</div>
</div>
----------------------------------------
#topo {width:100%; height:99px; background-image:url(topo.png); background-repeat:repeat-x;}
#dentrotopo {width:250px; height:79px; margin:0 auto; padding-top:20px;}

Então vimos que eu usei o padding-top na div dentrotopo com a dimensão de 20 pixels.
Se olharem, vão ver que a altura do meu dentro topo está de 79 pixels. Mas na verdade o meu topo foi de 99 pixels, veja o que acontece:

Quando usamos um padding-top, devemos subtrair o valor pela altura, ou seja, 99px - 20px = 79px. Mas não é sempre pela altura, se for um padding-right ou um padding-left temos que subtrair pela largura do blog... E assim, o padding-top e o padding-button é subtraído pela altura. Já o padding, que é sózinho o padrão, tem que subtrair o valor tanto pela altura, quanto pela largura.

PARA NÃO SE CONFUNDIR!

Regras resumidas:
padding - Subtrair valor pela largura e pela altura do blog.
padding-top - Subtrair valor apenas pela altura do blog.
padding-button - Subtrair valor apenas pela altura do blog.
padding-left - Subtrair valor apenas pela largura do blog.
padding-right - Subtrair valor apenas pela largura do blog.

Em alguns templates, se não fizer essas mudanças eles podem alterar automáticamente as medidas do seu blog. Mas eu outros, não interfere em nada disso, mas é sempre bom previnir.

Por hoje é só, se alguém tiver dúvidas poste um comentário e eu responderei o mais rápido possível.