Propriedade padding

A propriedade padding define o preenchimento interno do elemento. Os valores da propriedade são quaisquer unidades de tamanho. Por padrão, cada navegador pode adicionar preenchimentos diferentes aos elementos. A propriedade é uma abreviação para as propriedades padding-top, padding-right, padding-bottom, padding-left.

Sintaxe

seletor {
	padding: valor;
}

Número de parâmetros

A propriedade padding aceita 1, 2, 3 ou 4 valores, listados separados por espaço:

Quantidade	Descrição
`1`	Um valor define o preenchimento em todos os lados do elemento.
`2`	O primeiro valor define o preenchimento superior e inferior, e o segundo - direito e esquerdo.
`3`	O primeiro valor define o preenchimento superior, o segundo - direito e esquerdo, e o terceiro - inferior.
`4`	O primeiro valor define o preenchimento superior, o segundo - direito, o terceiro - inferior, e o quarto - esquerdo.

Exemplo

Neste caso, por padrão, o preenchimento interno será zero e o texto ficará colado à borda do bloco:

<div id="elem">
	some long text
</div>

#elem {
	padding: 0;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Exemplo

E agora vamos definir um preenchimento interno de 30px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 30px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Exemplo

Agora o preenchimento superior e inferior será de 20px, e o direito e esquerdo - 5px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 20px 5px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Exemplo

Agora o preenchimento superior é de 5px, o direito - 15px, o inferior - 25px, o esquerdo - 35px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 5px 15px 25px 35px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Veja também

a propriedade margin,
que define a margem externa