Pinceladas da Web

Padding é a distância do elemento entre a borda e o seu conteúdo. As regras para margem também se aplicam ao padding, excepcionalmente o valor “auto” e valores negativos, que não podem ser declarados:

padding-top: valor;
padding-right: valor;
padding-bottom: valor;
padding-left: valor;

Você também pode declarar esses valores para padding em uma única propriedade:

padding: 10px 10px 10px 10px;

Se você for declarar o padding como acima, ele segue a seguinte ordem:

• top
• right
• bottom
• left

Declarando apenas um valor, ele é ajustado para todos os lados:

padding: 10px;

Declarando apenas 2 ou 3 valores, funcionaria da seguinte forma:

padding: 10px 10px; Aqui o primeiro valor ajusta o padding para top e bottom e o segundo valor para left e right.

padding: 10px 10px 10px; Aqui o primeiro valor ajusta o padding para top, o segundo para left e right e o terceiro para bottom.

Como você pode reparar no exemplo abaixo, a div container tem um padding de 20px:

#container {
    width:760px;
    margin:0 auto;
    padding:20px;
    border:1px solid #000;
    background:#FFF;
}

Isso colocaria o conteúdo de container a 20px de sua borda.

Tradução do artigo original de: CSS Basics.