8. Padding

23/03/2013 | |
Padding é quase a mesma coisa que o margin em questão estrutural, mas muda em um pequeno aspecto no quesito do que ele vem a ser: A margin é o espaço entre o elemento e o resto e o padding é o espaço entre o elemento e sua borda. Enquanto margin de uma caixa vai ser o espaçamento entre elas, o padding vai ser o espaço entre a caixa e o seu conteúdo. Entenderam? Vejam o exemplo, mostrando as diferenças para que você não se confunda. Não é tão difícil assim, observem.



Margin vai ser o espaço da caixa para fora e padding é o espaço dentro dela. Equivale também aos outros elementos. Vamos supor que colocamos um menu dentro da caixa. Se o menu tem fundo preto e colocamos padding de 2px, entre o começo do fundo e o texto haverá esse espaço, mas se colocamos em margin, vai ser entre um menu e outro. Compreenderam? Por fim, observe a estrutura:

padding-top: 10px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 4px;
padding: 7px;

Já entendem o código, não é mesmo? É a mesma coisa do margin, mudando apenas o elemento. Até a próxima lição!