Enchimento - CSS-Tricks | CSS Almanac 2025

A paddingpropriedade em CSS define a parte mais interna do modelo de caixa, criando espaço ao redor do conteúdo de um elemento, dentro de quaisquer margens e / ou bordas definidas.

Os valores de preenchimento são definidos usando comprimentos ou porcentagens e não podem aceitar valores negativos. O valor inicial, ou padrão, de todas as propriedades de preenchimento é 0.

Aqui está um exemplo simples:

.box ( padding: 0 1.5em 0 1.5em; )

O exemplo acima está usando a paddingpropriedade shorthand, que aceita até quatro valores, mostrados aqui:

.box ( padding: || || || )

Se menos de quatro valores forem definidos, os valores ausentes são assumidos com base nos que estão definidos. Por exemplo, os dois conjuntos de regras a seguir obteriam resultados idênticos:

.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )

Assim, se apenas um valor for definido, isso definirá todas as quatro propriedades de preenchimento com o mesmo valor:

.box ( padding: 20px; )

Se três valores forem declarados, é padding: (top) (left-and-right) (bottom);.

Qualquer uma das propriedades de preenchimento individuais pode ser declarada usando à mão, caso em que você definiria apenas um valor por propriedade. Portanto, o exemplo anterior pode ser reescrito da seguinte forma:

.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )

Cálculos de preenchimento e largura do elemento

Se um elemento tiver uma largura especificada, qualquer preenchimento adicionado a esse elemento será adicionado à largura total do elemento. Isso geralmente é um resultado indesejável, pois requer que a largura de um elemento seja recalculada toda vez que o preenchimento for ajustado. (Observe que isso também acontece com a altura, mas na maioria dos casos é preferível não dar a um elemento uma altura definida.)

Por exemplo:

.box ( padding: 20px; width: 400px; )

Neste exemplo, embora o .boxelemento receba uma largura explícita de 400 px, a largura real renderizada do elemento na página será de 440 px. Isso leva em consideração não apenas a largura de 400px, mas também 20px de preenchimento esquerdo e 20px de preenchimento direito (definido com a abreviação de preenchimento no exemplo anterior).

Isso acontece para manter 400 px de espaço de conteúdo, em vez de 400 px da largura total do elemento. Aqui está uma caneta demonstrando isso:

Confira esta Caneta!

Isso ocorre em todos os navegadores em uso, no modo padrão, mas não ocorrerá no IE6 e IE7 no modo quirks (ou seja, nas páginas exibidas no IE6 ou IE7 onde não há doctype declarado ou onde algo mais está acontecendo para acionar quirks modo).

Para resolver esse problema, mantendo assim a largura em 400 px, independentemente da quantidade de preenchimento, você pode usar a box-sizingpropriedade:

.box ( padding: 20px; width: 400px; box-sizing: border-box; )

Isso faz com que o elemento mantenha sua largura enquanto aumenta o preenchimento, diminuindo assim o espaço de conteúdo disponível. Aqui está uma demonstração: