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 todos Tag HTML (exceto para algumas das tags de 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:
preenchimento: canto superior direito inferior esquerdo;
preenchimento: 1px 2px 3px 6px;
Se você usou 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 a todos os quatro lados, pode simplificar seu CSS e apenas escreva um valor:
preenchimento: 12px;
Com essa linha de CSS, 12 pixels de preenchimento se aplicariam a todos os 4 lados do elemento.
Se você quiser 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 tornará o preenchimento horizontal (esquerdo e direito) o mesmo, enquanto altera a parte superior e inferior:
preenchimento: superior direito e inferior esquerdo;
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 {largura: 800px; altura: 200px; }
#container p {width: 400px; altura: 75%; preenchimento: 25% 0; }
O altura do parágrafo dentro do #recipiente elemento será 75% do #recipienteAltura 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
Sobre elementos de nível de bloco, o acolchoamento é 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 inline, 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 isso 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 filho para definir sua largura - como quando não tem uma largura predefinida, e um ou mais tem uma largura definida como uma porcentagem do elemento do contêiner, isso configura uma cadeia circular sem responder. 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.