CSS, Tutoriais

Economizando código no CSS: Margin, Border e Padding

Continuando com o uso de abreviações em CSS vamos aprender a definir usando pouco código as propriedades margin, border e padding de um elemento.

Antes de tudo precisamos entender como funciona esse rendering. Veja uma figura que ilustra o posicionamento de cada uma dessas propriedades:

margens, bordas e espaçamentos no CSS

A definição é bem simples: Padding é a distí¢ncia entre o conteúdo e a borda do elemento e margin é a distí¢ncia entre o elemento e outros elementos do conteúdo.

A propriedade Border

Esta propriedade é usada para definir o estilo, cor e espessura da borda do elemento. Veja um exemplo:

p {
border-style: dashed;
border-color: #000000;
border-width: 20px;
}

Agora vamos aprender a usar todos os estilos em apenas uma linha.

p {
border:
border-width border-style border-color
}

O Resultado, usando nosso exemplo, seria então:

p { border:  20px dashed #000000; }

As propriedades Padding e Margin

As regras são as mesmas para as duas, então usarei apenas a propriedade Padding como exemplo.

p {
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}

Para abreviarmos, usaremos os valores no sentido horário começando por Top, ou seja:

p { padding: top right bottom left. }

E o resultado, usando nosso exemplo, seria:

p { padding: 10px 0px 10px 0px; }

Caso as verticais (top e bottom) e as horizontais (right e left) sejam iguais, como no exemplo, podemos abreviar ainda mais usando a seguinte estrutura:

p { padding: verticais horizontais; }

E nosso exemplo usando esse tipo de abreviação ficaria assim:

p { padding: 10px 0px; }

Agora basta usar as mesmas regras para definir as margens. Veja mais uma imagem ilustrativa para ajudar a entender.

Exemplo de abreviações

Só para ter uma noção maior dessa economia de código, nosso primeiro exemplo de padding tinha 85 caracteres, e o ultimo apenas 24 caracteres.

Veja também meu artigo sobre economizar código no css com a propriedade font.