A folha de estilo em cascata (CSS) fornece centenas de propriedades de estilo para os elementos HTML. Juntamente com os estilos de decoração, ele também fornece propriedades para ajustar as posições e a colocação dos elementos na página da web. Essas propriedades incluem “flutuador","preenchimento","margem","posição", e muitos mais.

Este post cobrirá:

• Qual é a propriedade "preenchimento" em CSS?
• Como especificar a propriedade "preenchimento"?

Qual é a propriedade "preenchimento" em CSS?

O "preenchimento”Propriedade descreve a distância entre o conteúdo de um elemento e sua fronteira. Mais especificamente, esta propriedade adiciona espaço dentro do elemento, enquanto o “margem”A propriedade gera espaço ao redor do elemento. Os valores da propriedade de preenchimento podem ser medidos em “px","Em","rem", ou mais. No entanto, o "rem”É a melhor unidade para usar com propriedades de margem e preenchimento.

Pré -requisito: Crie um arquivo HTML

Para aplicar a propriedade de preenchimento em elementos HTML, os usuários devem criar o arquivo HTML. Para esse fim, utilize as seguintes etapas:

• Adicione um “”Elemento e atribui uma classe“conteúdo principal”.
• Então, inclua o “”Tag para colocar uma imagem e“

  ”Tag para incluir algum texto:

A luz da educação nos torna brilhantes.

Vamos seguir em frente para a seção CSS para aplicar o estilo ao contêiner.

Elemento de estilo “div”

Primeiro, acesse o elemento “” com classe “.conteúdo principal”E aplique as seguintes propriedades:

.conteúdo principal
Largura: 400px;
margem: automático;
borda: ranhura de 5px RGB (151, 151, 151);

A descrição das propriedades acima mencionadas é a seguinte:

• ““largura”Determina a largura do elemento.
• ““margem”Define o espaço ao redor do elemento.
• ““fronteira”Aplica a borda ao redor do elemento especificando os valores para largura, estilo e cor da borda.

A saída do código fornecido acima é representado abaixo:

Como especificar a propriedade "preenchimento"?

Em CSS “preenchimento”Propriedade tem um intervalo de um a quatro valores. Para melhor compreensão, siga os exemplos listados:

• Exemplo 1: Propriedade "preenchida" CSS com um valor
• Exemplo 2: Propriedade "preenchimento" do CSS com dois valores
• Exemplo 3: Propriedade "preenchimento" do CSS com três valores
• Exemplo 4: Propriedade "preenchimento" do CSS com quatro valores

Exemplo 1: Propriedade "preenchida" CSS com um valor

No CSS, quando o “preenchimento”A propriedade está atribuída um valor, adiciona“1Rem”Espaço em cada lado do conteúdo do elemento:

preenchimento: 1Rem;

Saída

Exemplo 2: Propriedade "preenchimento" do CSS com dois valores

O "preenchimento”A propriedade pode ser ajustada com dois valores, onde:

• O "primeiro valor”Representa o preenchimento (espaço) nos lados superior e inferior.
• O "segundo valor”Representa o espaço nos lados esquerdo e direito do conteúdo do elemento:

preenchimento: 1Rem 2Rem;

Saída

Exemplo 3: Propriedade "preenchimento" do CSS com três valores

O CSS “preenchimento”A propriedade pode ser ajustada com os três valores. Eles trabalham da seguinte maneira:

• O primeiro valor indica preenchimento no topo.
• O segundo valor significa estofamento nos lados esquerdo e direito.
• O terceiro valor define preenchimento na parte inferior do conteúdo do elemento:

preenchimento: 1Rem 2Rem 3Rem;

Saída

Exemplo 4: Propriedade "preenchimento" do CSS com quatro valores

O "preenchimento”Propriedade com quatro valores ajusta o espaço especificado entre o conteúdo e a borda de todos os lados, conforme descrito abaixo:

• ““Primeiro valor”Adiciona preenchimento no topo.
• ““Segundo valor”Adiciona preenchimento no lado direito.
• ““Terceiro valor”Adiciona preenchimento na parte inferior.
• ““Quarto valor”Adiciona preenchimento no lado esquerdo:

preenchimento: 2Rem 3Rem 1Rem 2Rem;

Saída

Elaboramos os estilos de preenchimento HTML com valores diferentes usando CSS.

Conclusão

O CSS “preenchimento”Propriedade aumenta a distância em torno do conteúdo do elemento. Tem um alcance de valor de um a quatro. ““Um valor”Significa o mesmo preenchimento em cada lado do conteúdo do elemento. ““Dois valores”Defina o espaço no fundo superior e nos lados da esquerda. ““Três valores”Defina o preenchimento nas laterais superior, esquerda-direita e inferior do conteúdo do elemento. ““Quatro valores”Especifique o preenchimento exclusivo em cada lado. Este post demonstrou o estilo de preenchimento HTML no CSS.