Guia de aprendizado
Design responsívo: preenchimento
Preenchimentos são espaços vazios que são postos no interior de um elemento HTML para aplicar uma margem entre seu conteúdo e limites internos. A tabela abaixo apresenta as classes responsáveis por aplicar preenchimento aos elementos HTML:
| Classe | Tamanho do preenchimento |
|---|---|
| no-padding | 0px |
| x-small-padding | 8px |
| small-padding | 16px |
| medium-padding | 32px |
| large-padding | 64px |
| x-large-padding | 128px |
| jumbo-padding | 256px |
Para adicionar preenchimento somente a um dos cantos internos de um elemento HTML basta acrescentar ao sufixo -padding os seguintes sufixos: -top (preenchimento superior), -bottom (preenchimento inferior), -left (preenchimento à esquerda), -right (preenchimento à direita). Vejamos alguns exemplos de uso.
Exemplo 1: bloco de conteúdo com preenchimento de 32px em todos os seus cantos externos.
<div class="container medium-padding small-border-frame border-color-silver"> <div class="container bg-color-coral"> <p class="text-center text-color-white"> Preenchimento de 32px para todos os cantos do contêiner externo </p> </div></div>Esse código irá resultar no seguinte conteúdo:
Preenchimento de 32px para todos os cantos do contêiner externo
Exemplo 2: bloco de conteúdo com preenchimento esquerdo de 32px.
<div class="container medium-padding-left small-border-frame border-color-silver"> <div class="container bg-color-tan"> <p class="text-center text-color-white"> Preenchimento de 32px para o canto esquerdo do contêiner externo </p> </div></div>Esse código irá resultar no seguinte conteúdo:
Preenchimento de 32px para o canto esquerdo do contêiner externo