Como usar as propriedades Margin e Padding - CSS

Olá pessoal, nesse artigo vamos explorar a fundo as Propriedades Margin e Padding do CSS. Apesar de parecerem bem simples, tem alguns segredos importantes que precisam ser levados em conta.

Margin

A propriedade margin simplesmente adiciona uma margem ao seu elemento. Você pode utilizar qualquer medida Css (px, pt, em, %...) como tamanho da propriedade margin, além disso você pode atribuir valores negativos, mas tenha cuidado com eles.

Ela deve ser usada da seguinte maneira:

 
#elemento { 
    margin-top: 15px; 
    margin-right: 10px;
    margin-bottom: 25px;
    margin-left: 35px;
}

Essa é a declaração completa, porém existe uma forma mais prática para declarar o margin quando você deseja adicionar margens a todos os lados do elemento.

#elemento { margin: 15px 10px 25px 35px; }

Utilizei os mesmo valores justamente para fazer a relação, na maneira curta (shorthand) o primeiro valor é responsável pela margem do topo, a segunda pela direita, a terceira pela da base e a quarta pela esquerda. Ex: #elemento { margin: top right bottom left };

Caso o valor da margem do topo seja igual a da base e a da direita seja igual a da esquerda você pode declarar dessa forma:

#elemento { margin: 25px 10px }

Ou seja, o margin top e bottom do elemento será de 25px e left e right de 10px.

Ex: #elemento { margin: topo/base esquerda/direita }

E se todos os valores forem iguais você pode declarar da seguinte maneira:

#elemento { margin: 10px; }

Quando dois elementos possuem margins que se tocam, automaticamente o maior margin prevalece e o menor é sobreposto.

<div>
    <h1></h1>
    <h2></h2>
</div>

h1 { margin-bottom: 20px; }
h2 { margin-top: 5px; }

Nesse caso a distância entre o h1 e h2 não vai ser de 25px (20px + 5px) como o esperado e sim de 20px, pois o margin de 5px do h2 vai ser sobreposto pelo margin de 20px do h1.

A propriedade margin adiciona um espaço transparente e ele não pode ser preenchido com nenhuma cor. Além disso, ela não pode receber bordas.

Veja como fica um elemento de 200px por 200px com uma margem de 25px:

Dei uma borda branca e uma cor laranja para o elemento e um background preto pro fundo para que de para notar as margens de 25px que ele recebeu. Outra detalhe importante é que elementos do tipo inline não recebem aceitam a propriedade margin-top e margin-bottom, somente os de tipo block. Então caso queira usar o margin-top e bottom nele simplesmente altere seu display para block.

Padding

O padding tem um funcionamento muito similar ao do margin, porém ao invés de dar uma espaçamento externo, ele da uma interno. Vou usar uma imagem para ficar mais claro:

#elemento { background: #f90; width: 200px; height: 200px; 
margin: 25px; padding: 25px; border: 1px solid #fff; }    

Notem que o texto que estava dentro do nosso elemento agora está com um afastamento de 25px do topo, da esquerda e da direita e caso o conteúdo chegasse até a base dele, também teria uma padding de 25px.

Assim como o margin podemos escrever de diversas formas o padding:

#elemento { 
    padding-top: 25px;
    padding-right: 45px;
    padding-bottom: 35px;
    padding-left: 15px;
}
#elemento { padding: 25px 15px; } /* Top/bottom - right/left */
#elemento { padding: 25px; }/* top/right/bottom/left */

Tenha cuidado ao utilizar o padding pois ele aumenta a largura do elemento. Caso seu elemento tenha um width de 200px e você utilize um padding-left de 50px ele vai passar a ter uma largura de 250px. Então, sempre que necessário, compense o padding do elemento reduzindo o width ou o height.