Como faço para criar preenchimento em 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 evita que o codificador repita esse código de preenchimento para cada instância desse elemento e cria com mais facilidade consistência na página. O elemento HTML a ser preenchido pode ser qualquer número de coisas, como um parágrafo, uma tabela ou um cabeçalho.

Para criar preenchimento em CSS, primeiro você precisa identificar o elemento HTML que deseja preencher. Esse elemento que você deseja preencher é 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 todos os quatro lados de um elemento ao mesmo tempo e outros quatro 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 vez é chamada de propriedade abreviada .

A linguagem de codificação usada para especificar uma declaração de preenchimento CSS é simplesmente a palavra "preenchimento". Após esse rótulo, são os "valores" relevantes do preenchimento ou informações sobre a quantidade de espaço desejada, geralmente representada por pixels ou um percentagem. O preenchimento e os valores são escritos entre chaves ou colchetes (ou seja, "{" e "}"). Antes de tudo isso, é o elemento HTML a ser preenchido (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 5in) ou centímetros (por exemplo, 1cm ou 5cm) . Os valores também podem ser declarados como uma porcentagem do elemento HTML que está sendo estilizado. Se o valor for 50%, por exemplo, o preenchimento será igual à metade do tamanho do elemento.

Os exemplos a seguir são o código HTML para preencher um elemento HTML por meio de valores refletidos em 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.

estofamento: 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 corresponderá à esquerda e à direita. Três valores farão com que o primeiro se refira à parte superior, o segundo aos lados esquerdo e direito e o terceiro à parte inferior do elemento HTML. A atribuição do máximo de quatro valores faz com que o primeiro, o segundo, o terceiro e o quarto valores correspondam às partes 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 ponto e vírgula, por exemplo:

preenchimento: 10px 20px 10px 20px;

O preenchimento em CSS também pode ser feito de um lado de cada vez. Nesse sentido, existem mais quatro propriedades de preenchimento disponíveis. Estes são preenchimento superior, preenchimento direito, preenchimento inferior e preenchimento esquerdo. 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 de preenchimento recebe apenas um valor em comprimento ou porcentagem. Por exemplo:

padding-top: 10px;
preenchimento à direita: 20 px;
fundo do preenchimento: 10 px;
preenchimento esquerdo: 20 px;

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

<html>
<head>
<style type = "text / css">
p.example1 {padding: 10px;} / * Preenchimento com mão curta para todos os quatro lados * /
p.example2 {padding: 50px 30px;} / * Preenchimento com mão curta para a parte superior e inferior, seguido pela esquerda e direita * /
p.exemplo3 {
padding-top: 10px;
fundo do preenchimento: 20 px;
fundo do preenchimento: 10 px;
preenchimento esquerdo: 20 px;
} / * preenchimento individual. * /
</style>
</head>

<body>
<p class = "example1"> Este texto tem o mesmo preenchimento em cada lado. O preenchimento de cada lado tem 10 px. </p>
<p class = "example2"> Este texto possui um preenchimento superior e inferior de 50px e um preenchimento esquerdo e direito de 30px. </p>
<p class = ”example3”> Este texto possui um preenchimento superior de 10 px, um direito de 20 px, um inferior de 10 px e um esquerdo de 20 px. </p>
</body>
</html>

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 das classes no início do código indica uma declaração de uma classe atribuída a um parágrafo. Observe as chaves após a declaração de classe que inclui as atribuições de valor da propriedade padding.

Embora isso possa parecer muito trabalhoso, é 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 é a tag p e, em seguida, referenciar a classe quando usar 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 classes. Basta usar o código a seguir entre as marcas de estilo e codificar os parágrafos sem especificar nenhuma classe. Esse código iria entre as tags body 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.