Skip to content

Breve visão geral do preenchimento CSS

26 de maio de 2021

O preenchimento CSS é uma das propriedades do modelo de caixa CSS. Esta propriedade abreviada define o preenchimento em torno de todos os quatro lados de um elemento HTML. O preenchimento CSS pode ser aplicado a quase todas as tags HTML (exceto para algumas das tags da tabela). Além disso, todos os quatro lados do elemento podem ter um valor diferente.

Propriedade CSS Padding

Para usar a propriedade de preenchimento CSS abreviado, você pode usar o mnemônico “TRouBLe” (ou “TRiBbLe” para os fãs de Star Trek). Isso significa principal, direito, inferior, e deixoue se refere à ordem das larguras de preenchimento que você definiu na propriedade abreviada. Por exemplo: padding: superior direito inferior esquerdo;
preenchimento: 1px 2px 3px 6px;

Se você usasse os valores listados acima, ele aplicaria um valor de preenchimento diferente a cada lado de qualquer elemento HTML ao qual você está aplicando. Se você deseja aplicar o mesmo preenchimento aos quatro lados, pode simplificar seu CSS e escrever apenas um valor: preenchimento: 12px;

Com essa linha de CSS, 12 pixels de preenchimento se aplicariam a todos os 4 lados do elemento. Se você deseja que o preenchimento seja o mesmo para a parte superior e inferior e esquerda e direita, você pode escrever dois valores: preenchimento: 24px 48px;

O primeiro valor (24px) se aplicaria à parte superior e inferior, enquanto o segundo se aplicaria à esquerda e à direita. Se você escrever três valores, isso fará com que o preenchimento horizontal (esquerdo e direito) seja o mesmo, enquanto altera o superior e o inferior: preenchimento: superior direito e esquerdo inferior;
preenchimento: 0px 1px 3px;

De acordo com o modelo de caixa CSS, o preenchimento é o mais próximo do elemento / conteúdo em si. Isso significa que o preenchimento é adicionado a um elemento entre a largura ou altura do conteúdo e quaisquer valores de borda que você usar. Se o preenchimento for definido como zero, ele terá a mesma borda do conteúdo.

Valores de preenchimento CSS

O preenchimento CSS pode assumir qualquer valor de comprimento não negativo. Certifique-se de especificar a medida, como px ou em. Você também pode especificar uma porcentagem para o seu preenchimento, que será uma porcentagem da largura do bloco que contém o elemento. Isso inclui o preenchimento superior e inferior. Por exemplo: #container {width: 800px; altura: 200px; }
#container p {width: 400px; altura: 75%; preenchimento: 25% 0; }

A altura do parágrafo dentro do #recipiente elemento será 75% do #recipientealtura de mais 25% da largura para o preenchimento superior e 25% da largura para o preenchimento inferior. Isso totaliza 300 + 200 + 200 = 700 px.

Efeitos da adição de preenchimento CSS

Em elementos de nível de bloco, o preenchimento é aplicado nos quatro lados. Como o elemento já é um bloco ou caixa, o preenchimento é aplicado às laterais da caixa. Quando o preenchimento CSS é adicionado a elementos embutidos, pode haver alguma sobreposição de elementos acima e abaixo do elemento embutido se o preenchimento vertical exceder a altura da linha, mas não empurrará a altura da linha para baixo. O preenchimento CSS horizontal aplicado a elementos embutidos será adicionado ao início e ao final do elemento. E o preenchimento pode quebrar as linhas. Mas ele não se aplica a todas as linhas de um elemento multilinha, então você não pode usar preenchimento para recuar um segmento de conteúdo embutido multilinha. Além disso, no CSS2.1, você não pode criar blocos de contêiner onde a largura depende de um elemento com porcentagens para larguras (ou larguras de preenchimento). Se você fizer isso, o resultado será indefinido. Os navegadores ainda exibirão o conteúdo, mas você pode não obter os resultados esperados. Se você pensar sobre isso, faz sentido, como se seu elemento contêiner precisasse saber a largura de seus elementos filhos para definir sua largura – como quando ele não tem uma largura pré-definida, e um ou mais tem uma largura definida como uma porcentagem do elemento contêiner, isso cria uma cadeia circular sem resposta. Se você usar porcentagens para larguras de qualquer coisa em seu documento, certifique-se de que as larguras do elemento pai também sejam definidas.

Formato mla apa chicago Sua Citação

Kyrnin, Jennifer. “Breve Visão Geral do Preenchimento CSS.” ThoughtCo, maio. 14 de 2021, thinkingco.com/css-padding-overview-3469778.
Kyrnin, Jennifer. (2021, 14 de maio). Breve Visão Geral do Preenchimento CSS. Obtido em https://www.thoughtco.com/css-padding-overview-3469778
Kyrnin, Jennifer. “Breve Visão Geral do Preenchimento CSS.” ThoughtCo. https://www.thoughtco.com/css-padding-overview-3469778 (acessado em 26 de maio de 2021).