Como Usar a Propriedade CSS Padding no Seu Site

As propriedades de padding no CSS são usadas para gerar espaço em torno do conteúdo de um elemento, dentro de quaisquer bordas definidas. Com CSS, você tem controle total sobre o preenchimento, podendo definir o padding para cada lado de um elemento (superior, direito, inferior e esquerdo).

Preenchimento – Lados Individuais

O CSS possui propriedades específicas para definir o preenchimento de cada lado de um elemento:

• padding-top: Superior
• padding-right: Direito
• padding-bottom: Inferior
• padding-left: Esquerdo

Todas as propriedades de preenchimento podem ter os seguintes valores:

• comprimento: Especifica o preenchimento em px, pt, cm, etc.
• %: Especifica o preenchimento em % da largura do elemento contendo.
• inherit: Especifica que o preenchimento deve ser herdado do elemento pai.

Nota: Valores negativos não são permitidos.

Exemplo

O exemplo a seguir define diferentes preenchimentos para todos os quatro lados de um elemento <div>:

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

Preenchimento – Propriedade Taquigrafia

Para encurtar o código, é possível especificar todas as propriedades de preenchimento em uma única propriedade. A propriedade padding é um atalho para as seguintes propriedades individuais:

• padding-top
• padding-right
• padding-bottom
• padding-left

Como Funciona

Se a propriedade padding tem quatro valores:

padding: 25px 50px 75px 100px;

• O padding superior é 25 pixels
• O padding direito é 50 pixels
• O padding inferior é 75 pixels
• O padding esquerdo é 100 pixels

Exemplo

div {
    padding: 25px 50px 75px 100px;
}

Se a propriedade padding tem três valores:

padding: 25px 50px 75px;

• O padding superior é 25 pixels
• Os paddings direito e esquerdo são 50 pixels
• O padding inferior é 75 pixels

Exemplo

div {
    padding: 25px 50px 75px;
}

Se a propriedade padding tem dois valores:

padding: 25px 50px;

• Os paddings superior e inferior são 25 pixels
• Os paddings direito e esquerdo são 50 pixels

Exemplo

div {
    padding: 25px 50px;
}

Se a propriedade padding tem um valor:

padding: 25px;

• Todos os quatro paddings são 25 pixels

Exemplo

div {
    padding: 25px;
}

Padding e Largura do Elemento

A propriedade width do CSS especifica a largura da área de conteúdo do elemento. A área de conteúdo é a porção dentro do padding, borda e margem de um elemento (o modelo de caixa).

Assim, se um elemento tem uma largura especificada, o padding adicionado ao elemento será somado à largura total do elemento. Isso muitas vezes resulta em um comportamento indesejado.

No exemplo a seguir, o elemento <div> tem uma largura de 300px. No entanto, a largura real renderizada do elemento <div> será 350px (300px + 25px de padding-left + 25px de padding-right):

Exemplo

div {
    width: 300px;
    padding: 25px;
}

Para manter a largura de 300px, independentemente da quantidade de padding, você pode usar a propriedade box-sizing. Isso faz com que o elemento mantenha sua largura; se você aumentar o padding, o espaço de conteúdo disponível diminuirá. Aqui está um exemplo:

Exemplo

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
}

Para mais detalhes, você pode consultar a documentação do MDN sobre padding.

Espero que este artigo tenha ajudado a entender melhor as propriedades de padding no CSS! Se tiver alguma dúvida ou sugestão, deixe um comentário abaixo.

Referências

CSS Padding MDN Web Docs

CSS Padding w3schools