Propriedade de preenchimento em CSS explicou

O preenchimento é a propriedade usada para criar espaço em torno do conteúdo do elemento (dentro da borda). Um elemento tem quatro lados, e a propriedade de preenchimento permite gerar espaço em torno de qualquer lado específico. Além disso, a propriedade de abreviação de preenchimento permite criar espaço em torno de vários lados simultaneamente.

O preenchimento e as margens são fenômenos interligados, pois ambas as propriedades tendem a criar espaço ao redor dos elementos. No entanto, a diferença é o preenchimento cria espaço dentro das fronteiras, e a margem adiciona espaço fora da fronteira. Este post informativo descreve o trabalho e o uso da propriedade de preenchimento no CSS.

Como funciona a propriedade de preenchimento no CSS

O objetivo principal da propriedade de preenchimento é adicionar espaço ao redor dos elementos. O preenchimento pode ser usado de uma das seguintes maneiras:

Usando a propriedade de preenchimento nos lados individualmente

O preenchimento pode ser dado aos lados individuais, emitindo a seguinte sintaxe:

seletor tapdding-top: value; // no lado superior
Seletor Padding-Right: value; // no lado direito
Seletor Bottom-Bottom: value; // no lado inferior
Seletor Padding-Left: value; // no lado esquerdo

As instâncias da sintaxe acima são descritas abaixo:

• Seletor é um elemento ou pode se referir à classe CSS
• O topo de preenchimento, a direita, o fundo de preenchimento e o preenchimento e a esquerda representa os lados de estofamento
• O valor define o espaço que seria fornecido e o valor pode ter uma unidade de medição i.e., comprimento (px, cm, rem, em), %(porcentagem de acordo com o elemento), automático (conforme definido pelo navegador).

Observação: Os valores medidos em px são absolutos (fixos), enquanto os valores em %, REM e EM são usados ​​para capacidade de resposta e são ajustados automaticamente.

Usando a propriedade abreviada de preenchimento

A propriedade abreviada de preenchimento pode ser usada para adicionar espaço a vários lados simultaneamente. A sintaxe a seguir é praticada usando a propriedade abreviada de preenchimento no CSS.

Seletor Padding: value1 value2 value3 value4;

Na sintaxe acima, o valor1, o valor2, o valor3 e o valor4 representa o lado superior, direito, inferior e esquerdo do elemento.

Como usar a propriedade de preenchimento no CSS

Esta seção é composta por vários exemplos que definem o uso de propriedades preenchidas no CSS.

Exemplo 1: Usando a propriedade de preenchimento em lados individuais
O código a seguir pratica a propriedade de preenchimento em todos os lados individualmente.

Propriedade preenchida em CSS

Usando o top de preenchimento em px

Usando a direita de preenchimento em EM

Usando o fundo de preenchimento em %

Usando o preenchimento na esquerda em px

A descrição do código é dada abaixo

• A largura de todos os parágrafos seria "conteúdo de ajuste" para melhorar melhor a compreensão do preenchimento
• Quatro classes CSS denominadas como "Top", "Rig", "Bot" e "Lef" referem-se a propriedades de preenchimento, estofamento-right-right, acolchoamento
• As classes “top” e “lef” usam o “PX” como unidade de medição para estofamento onde “Rig” e “Bot” classes praticam “Em” e “%” como uma unidade de medição para preenchimento
• Os quatro parágrafos usam as classes CSS para implementar o preenchimento nesses parágrafos

A imagem do código é mostrada aqui

Saída

Exemplo 2: Usando a propriedade de preenchimento em vários lados simultaneamente
A propriedade abreviada de preenchimento permite adicionar preenchimento a vários lados simultaneamente e aqui é praticada usando o seguinte código.

Propriedade preenchida em CSS

Usando o preenchimento em px

Usando preenchimento 3% para cima/inferior e 6% na esquerda/direita

Usando o preenchimento 2em para cima/inferior e 3em para a direita/esquerda

Usando o preenchimento de 5px para todos os lados

pulando a propriedade de preenchimento no lado esquerdo

A descrição do código é fornecida abaixo

• definiu vários estilos, como cor de fundo, largura e estilo de borda para todos os parágrafos
• Cinco classes CSS são usadas denominadas "All", "Trio", "Duo", "Nano" e "Skip".
• A classe "tudo" permite adicionar diferentes valores de preenchimento a todos os lados
• A classe "trio" agrega valor de preenchimento 3% a superior/inferior e 6% à direita/esquerda
• A classe "duo" permite a propriedade de preenchimento na parte superior/inferior por 2em e à direita/esquerda por 3em
• O "nano" adicionará valor de preenchimento 5px a todos os lados
• A classe "Skip" adiciona preenchimento aos três lados e ele pularia o lado esquerdo (pois seu valor é 0 na classe CSS acima) para os lados.

Observação: Além de pular o preenchimento no lado esquerdo, qualquer outro lado pode ser ignorado usando 0 valor no local.

A imagem do código é mostrada abaixo

Saída

A partir da saída acima, o conceito de propriedade preenche em vários cenários pode ser obtido.

Os exemplos acima permitem que você aprenda a funcionalidade do preenchimento nos seguintes contextos:

• Usando a propriedade de preenchimento de cada lado individualmente
• Usando a propriedade de preenchimento com vários valores de medição (PX, % e EM)
• Usando a propriedade abreviada de preenchimento para adicionar preenchimento em vários lados simultaneamente ou pular qualquer lado

Conclusão

O preenchimento é a propriedade usada para criar espaço em torno de um elemento. O preenchimento pode ser fornecido a lados individuais usando, preenchimento, preenchimento-direita, fundo de preenchimento e preenchimento à esquerda. Este post informativo esclarece o mecanismo de trabalho e o uso de propriedades preenchidas no CSS. Além disso, também fornecemos dicas para trabalhar na propriedade abreviada que contém o efeito combinado do top-top/direito/inferior/esquerda e é aplicado em vários lados simultaneamente.