Como faço para criar preenchimento no CSS?

O preenchimento CSS permite que um codificador HTML defina o preenchimento padrão ou o espaço morto fora de um elemento HTML. O benefício de fazer isso é que ele salva o codificador de repetir esse código de preenchimento para cada instância desse elemento e cria mais facilmente consistência na página. O elemento HTML a ser acolchoado pode ser qualquer número de coisas, como um parágrafo, uma tabela ou um título. Esse elemento que você deseja PAD é conhecido como seletor. Em seguida, você deseja especificar os valores de preenchimento apropriados. Existem cinco tipos diferentes de propriedades de preenchimento no CSS - um para os quatro lados de um elemento ao mesmo tempo e quatro outros para cada lado individual do elemento (por exemplo, o lado esquerdo, o lado direito, o lado superior ou o lado inferior). Uma propriedade que permite ao programador especificar valores para todos os quatro lados de um elemento HTML de uma só vez, é chamado de propriedade abreviada .

A linguagem de codificação usada para especificar uma declaração de preenchimento CSS é simplesmente a palavra "preenchimento". Seguindo esse rótulo, estão os "valores" relevantes do preenchimento, ou informações sobre a quantidade de espaço desejada, geralmente representada por pixels ou uma porcentagem. O preenchimento e os valores são escritos dentro de aparelhos encaracolados ou suportes encaracolados (ou seja, "{" e "}"). Precedindo tudo isso é o elemento HTML a ser acolchoado (por exemplo, "P" para o parágrafo ou "H2" para cabeçalhos de nível 2).

Em termos de como o valor é representado, os valores podem ser representados em pixels (por exemplo, 1px ou 5px), pontos (por exemplo, 1pt ou 5pt) ou polegadas (por exemplo, 1in ou 5 em) ou centímetros (por exemplo, 1cm ou 5cm). Os valores também podem ser declarados como uma porcentagem do elemento HTML sendo estilizado. Se o valor for 50%, por exemplo, o preenchimento será igual à metade do tamanho do elemento.

Os seguintes exemplos, são o código HTML para preencher um elemen htmlt por meio de valores refletidos em uma porcentagem e comprimento, respectivamente. Se apenas um valor for atribuído, os navegadores da Web atribuirão esse preenchimento aos quatro lados do elemento HTML.

preenchimento: 10%;
preenchimento: 100px;

Adicionar mais valores ao tipo de declaração de preenchimento acima fará com que os navegadores da Web os interpretem de uma certa maneira. Se dois valores forem atribuídos, o primeiro corresponderá à parte superior e inferior, enquanto o segundo corresponde à esquerda e à direita. Três valores farão com que os primeiros se referam ao topo, o segundo para os lados esquerdo e direito e o terceiro na parte inferior do elemento HTML. Atribuir o máximo de quatro valores causa o primeiro, o segundo, terceiro e quarto valores a corresponder à parte superior, direita, inferior e esquerda do elemento HTML, nessa ordem. Quando mais de um valor é fornecido, eles devem ser separados por espaços e terminados com um semi-colon, por exemplo:

preenchimento: 10px 20px 10px 20px;

preenchimento no CSS pode ser feito um lado emum tempo também. Nesse sentido, existem mais quatro propriedades de preenchimento disponíveis. Estes são top de preenchimento, preenchimento-direita, amargo a preenchimento e preenchimento-esquerda. Para criar preenchimento no CSS dessa maneira mais precisa, você precisará rotular as propriedades com a mesma sintaxe que as declarações abreviadas como acima. Cada uma dessas propriedades preenchidas leva apenas um valor em comprimento ou porcentagem. Por exemplo:

TOP de preenchimento: 10px;
Right-right: 20px;
Botting-Bottom: 10px;
Potding-esquerda: 20px;

O código a seguir cria uma página da web, declara as propriedades de preenchimento entre as tags de estilo e as usa em um elemento de parágrafo especificado pela tag P. O texto entre o/ * e o */são notas para explicar o tipo de preenchimento empregado e não seria incluído no código de preenchimento CSS.

Este texto tem o mesmo preenchimento de cada lado. O preenchimento de cada lado é 10px.

Este texto tem um preenchimento superior e inferior de 50px e um preenchimento esquerdo e direito de 30px.

Este texto tem um preenchimento superior de 10px, um preenchimento direito de 20px, um preenchimento inferior de 10px e um preenchimento esquerdo de 20px.

No exemplo acima, "Exemplo1" etc., são nomes atribuídos a uma classe, que são referenciados nos parágrafos. O período entre a tag P e os nomes da classe no início do código indica uma declaração de uma classe atribuída a um parágrafo. Observe os aparelhos após a declaração da classeEncontro que envolve as atribuições de valor da propriedade de preenchimento.

Embora isso possa parecer muito trabalho, é muito menos trabalhoso do que especificar preenchimento para cada parágrafo individual. Você pode declarar uma propriedade de preenchimento para o elemento desejado, que no exemplo acima está a tag P e, em seguida, faça referência à classe quando você usa o elemento entre as tags do corpo da página. Se apenas um tipo de preenchimento for necessário para todos os parágrafos, você não precisará usar aulas. Basta usar o código a seguir entre as tags de estilo e depois codificar os parágrafos sem especificar nenhuma classe. Esse código iria entre as tags do corpo em vez do código no exemplo acima.

p {preenchimento: 10px 20px 10px 20px;}

Esse preenchimento CSS que isso criaria afetaria todos os parágrafos, mesmo que não houvesse classe especificada.