O CSS padding faz parte do conjunto de propriedades da linguagem de estilo CSS utilizada para definir o espaçamento ao redor de um elemento. É importante entender como essa propriedade funciona e quando utilizá-la, pois ela é capaz de desposicionar elementos e fazer com que a pessoa desenvolvedora de aplicações front-end passe uma boa parte do tempo em busca de soluções.

Além disso, existe uma certa confusão entre a funcionalidade do padding em comparação à propriedade margin. Para demonstrar como esse recurso funciona e o que é possível fazer com ele, preparamos esse conteúdo que contém os seguintes tópicos:

• Saiba o que é a propriedade CSS padding
• Confira a sintaxe da propriedade CSS padding
• Entenda a diferença entre CSS padding e CSS margin
• Veja quais são os valores da propriedade CSS padding!
• Conheça todas as propriedades padding CSS
• Confira qual a compatibilidade com os navegadores  

Continue com a gente e boa leitura!

Basicamente, a propriedade padding corresponde à distância interna entre um elemento e a sua borda. Na prática, cada elemento HTML contém uma largura e altura padrão, que pode ou não ocupar toda a largura da página independente se o conteúdo também ocupa esse mesmo espaço.

Os elementos que ocupam toda a linha são chamados elementos de bloco ou block, entre eles:

,

,

, entre outros. Já os elementos em linha ou inline, são aqueles que ocupam apenas o espaço correspondente ao seu conteúdo, como: , , etc. Veja como a propriedade padding funciona quando é aplicada nesses dois tipos de elementos:

    
    
    


    Elemento block com padding

Perceba que o elemento

ocupa toda a largura da página, mesmo se escrevermos apenas poucas palavras entre as tags de abertura e fechamento. Nesse caso, o padding é aplicado em toda a linha. Já no elemento , que não ocupa a linha inteira, o distanciamento é aplicado apenas ao redor do espaço ocupado pelo conteúdo.

Confira a sintaxe da propriedade CSS padding

A propriedade padding pode conter diferentes valores. Veja qual é a sua sintaxe:

padding: height / inherit / initial.

No qual:

• height: corresponde a um tamanho predefinido, que pode ser especificado em unidades de medidas absolutas ou relativas. Falaremos sobre elas mais adiante;
• inherit: corresponde ao valor utilizado no elemento pai;
• initial: corresponde ao valor padrão do elemento.

Entenda a diferença entre CSS padding e CSS margin

É comum haver uma certa confusão entre as propriedades CSS padding e margin, pois as duas adicionam distâncias ao elemento. Entretanto, a margin corresponde ao espaçamento externo, pois ela é aplicada ao redor da borda. Já na propriedade padding, como dissemos, a distância é aplicada no interior do elemento, antes da borda. Veja o mesmo exemplo anterior se aplicarmos uma margin de 20px:

    
    
    


    Elemento block com padding e sem margin

Perceba que nos elementos com a borda em azul existe uma distância adicional de 20 px antes do início e após o final da borda. Além disso, colocamos as formatações do exemplo anterior para demonstrar a diferença entre elas.

É importante dizer que, nos elementos inline, as propriedades margin e padding são ignoradas para as posições top e bottom. Para que essa condição se modifique e elas tenham o comportamento de um elemento block, é preciso utilizar a propriedade display e atribuir o seu valor igual a block.

Outra observação importante nesse exemplo é em relação à largura do elemento quando utilizamos a propriedade padding. Compare o elemento inline com a borda vermelha ao mesmo elemento com a borda verde e veja como houve um acréscimo na largura no primeiro caso.

Quando utilizamos o padding, esse acréscimo pode causar o desposicionamento dos elementos HTML em uma página. Uma forma de evitar esse problema é descontando o espaço atribuído ao padding na propriedade width do elemento. Dessa forma, podemos evitar a quebra do layout.

Como mencionamos, os valores de padding podem ser diferenciados. Veja abaixo como ele funciona para cada possibilidade.

Definindo o tamanho do preenchimento com um valor fixo: length

A primeira possibilidade é a definição de um valor fixo para o padding. Utilizamos essa condição nos exemplos anteriores ao definirmos 20 pixels na propriedade. Vale ressaltar que quando usamos um valor fixo, essa condição será respeitada seja qual for o tamanho da tela do dispositivo. Dessa forma, o resultado poderá nem sempre é harmônico em todos os cenários.

É importante dizer que os valores fixos são considerados absolutos por não sofrerem variações. Eles podem ser representados por diferentes unidades de medida como: pixels (px), points (pt), centímetros (cm), in (polegadas) etc.

Definindo o tamanho do preenchimento relativo ao tamanho do bloco: percentage(%)

Outra forma de atribuirmos o valor de padding é com a utilização de valores relativos, como a percentagem. Dessa forma, o navegador fará o cálculo de acordo com o espaço disponível e o percentual indicado para a propriedade. Essa alternativa faz com que o espaçamento seja proporcionalmente o mesmo em cada tamanho de tela. Veja o exemplo no código fonte abaixo:

    
    
    


    Elemento com padding em percentual - redimensione a tela para perceber o funcionamento!

Além do percentual (%), existem outras unidades de medidas que também geram valores relativos para o padding, entre elas:

• em: equivale a duas vezes o tamanho da fonte utilizada no elemento;
• rem: o valor é calculado com base no tamanho da fonte do elemento root, que corresponde ao elemento raiz da página HTML;
• vw e vh: relativos à largura (width) e altura (height) da área visível da tela (viewport).

Redefinindo a propriedade para o valor padrão: initial 

A utilização do valor initial ao padding significa que ele terá a condição padrão definida pelo navegador. Mostraremos um exemplo no próximo tópico ao demonstrar a diferença entre initial e o valor igual a inherit.

Herdando a propriedade de seu elemento pai: inherit

O valor inherit para o padding indica que o atual elemento herdará a característica atribuída ao elemento pai. Veja um código de exemplo com as duas possibilidades para o padding: initial e inherit.

    
    
    


    
        
            Parágrafo com o padding inherit!
        

        
            Parágrafo com o padding initial!