Como usar Padding no CSS e suas propriedades

No conteúdo de hoje iremos falar sobre o CSS padding, que é uma propriedade que faz parte da linguagem de estilo CSS utilizada para definir uma distância entre o conteúdo de um elemento e as suas bordas. É importante entender como fazer o uso dessa propriedade, e em quais momentos ela é necessária, uma vez que ela é capaz de se posicionar nos elementos em tela.

Também neste artigo iremos demonstrar a diferença entre a funcionalidade padding e a margin, que podem ser facilmente confundidas.

O que é a propriedade CSS padding?

De forma direta, a propriedade padding é responsável por definir uma distância interna entre um elemento e sua borda. Criando essa lacuna entre o elemento e seu conteúdo, aumentará o tamanho do elemento ou diminuirá o seu conteúdo, mas, por padrão, o tamanho do elemento aumenta de modo que acomode essa distância. Entretanto, caso você utilize a propriedade “box-sizing: border-box” no elemento, o conteúdo interno será diminuído para acomodar a lacuna gerada pelo padding.

Para que serve o padding?

Afinal, quando podemos aplicar a propriedade CSS padding? Um dos momentos que se pode fazer uso dessa ferramenta é quando não queremos que o conteúdo do elemento toque nas bordas do container.

Exemplo:

Outro exemplo é quando queremos aumentar o tamanho de um elemento, como o tamanho de um botão:

Qual a diferença entre o CSS padding e o CSS margin?

Primeiramente, a propriedade CSS margin define área de margem, ou seja, a quantidade de espaço ao redor do elemento. Ela pode ser utilizada para mover o elemento em qualquer direção que você queira, ou para ajustar quanto espaço existirá entre um elemento com os outros.

Apesar de serem propriedades parecidas, já que ambas criam um espaço ao redor dos elementos, elas diferem no método de criar esse espaço. Como vimos, a propriedade padding é utilizada para definir a distância entre o conteúdo e a borda do container, enquanto isso, a propriedade margin cria um espaçamento externo “empurrando” os elementos adjacentes.

Quais são as propriedades do CSS padding?

Quando definimos a propriedade padding como sendo 10px por exemplo, estamos dizendo que os quatro lados ao redor do elemento possuirão o mesmo valor, mas também podemos atribuir valores separados para cada lado, veja a seguir:

• padding-bottom: indica o tamanho na parte inferior;
• padding-left: indica o tamanho no lado esquerdo;
• padding-right: indica o tamanho no lado direito;
• padding-top: indica o tamanho na parte superior;

Agora vamos conferir como fica a sintaxe no código CSS:

padding-bottom: 25px; /* Borda inferior*/

padding-left: 5px;/* Borda lateral esquerda*/

padding-right: 10px;/* Borda lateral direita*/

padding-top: 5px; /* Borda superior*/

padding: 10px; /* Aplica-se à todas as bordas*/

padding: 10px 20px; /* vertical | horizontal */

padding: 10px 5px 30px; /* superior | horizontal | inferior */

padding: 10px 5px 10px 5px: /* superior | direita | inferior | esquerda*/

Sintaxe da propriedade CSS padding

Também pode-se atribuir diferentes valores a propriedade padding, veja quais são:

padding: length | inherit | initial;

• length: corresponde a um tamanho predefinido utilizando unidades de medida, absolutas ou relativas;
• inherit: irá herdar o valor utilizado no elemento pai;
• initial: corresponde ao valor padrão do elemento;

Quais são os valores da propriedade CSS padding?

Como mencionado no tópico anterior, os valores que são atribuídos a propriedade padding  podem ser diferentes, veja abaixo a diferença entre cada um deles.

length: definindo o tamanho do preenchimento com um valor fixo

Podemos definir um valor fixo para a propriedade padding, por valor fixo, independentemente do tamanho da tela, ele sempre será o mesmo. Eles são considerados valores absolutos por não sofrerem variações e podem ser representados por diferentes unidades de medida como: pixels (px), points (pt), centímetros (cm), polegadas (in).

porcentagem(%): definindo o tamanho do preenchimento relativo ao tamanho do bloco

Outra forma de atribuir um valor ao padding, é utilizando valores relativos. Sendo assim, o navegador fará o cálculo do tamanho de acordo com o bloco onde o elemento está contido.

Outros valores relativos além da porcentagem são:

• em: é relativo ao tamanho da fonte utilizada no navegador;
• rem: o valor será calculado com base no tamanho de fonte do elemento raiz do documento;
• vw e vh: relativos à largura (width) e altura (height) da área visível da tela (viewport)

initial: redefinindo a propriedade para o valor padrão

Ao definir o valor initial, será aplicado o valor padrão da propriedade padding ao elemento

inherit: herdando a propriedade de seu elemento pai

O valor inherit irá indicar que o elemento herdará a característica atribuída ao seu elemento pai.

Conclusão

É importante entender como o CSS padding funciona em uma página HTML, de modo que ele não prejudicará o posicionamento dos elementos no layout de sua página. Assim, tendo conhecimento sobre as propriedades CSS, melhores resultados serão obtidos na construção das aplicações web.

Se você gostou desse conteúdo e gostaria de entrar na área de programação, eu recomendo que você faça a sua inscrição na Kenzie Academy Brasil. Estude Desenvolvimento Full Stack e só pague quando estiver formado. Faça já a sua inscrição.