CSS – O Truque/Hack do Padding Y

Publiquei este artigo originalmente na comunidade dev.to. Confira as imagens neste link para um melhor entendimento.

Recentemente em meu trabalho tive a demanda de gerar certificados de conclusão de curso, onde os textos e posições dos itens seriam alocados dinamicamente pelo HTML. Este certificado deveria manter o aspecto de uma folha A4 na hora de ser exibido, independente do dispositivo.

Para isso resolvi utilizar um recurso conhecido aqui pela internet como “padding hack” ou “padding trick”. Este truque não é algo totalmente novo, ele é originalmente creditado para meados de 2009, mas como não encontrei artigos em português sobre isso, resolvi escrever este conteúdo.

UMA BREVE EXPLICAÇÃO

Quando utilizamos a propriedade padding de eixo Y, ou seja, top ou bottom, o preenchimento gerado pelo navegador é baseado no tamanho do elemento pai.

Por exemplo:

Se você criar uma div de 400px, e dentro dela, criar outra div com padding-top (ou bottom) de 100%, este preenchimento será também de 400px.

Ou seja, temos um quadrado perfeito!

Sabendo disso, podemos então utilizar o padding para criar elementos nas proporções que desejarmos.

As proporções de tela mais comuns são 4:3 (Telas e TVs antigas) e 16:9 (Widescreen). Para obter a porcentagem a ser utilizada no padding, basta efetuar a divisão da proporção. Por exemplo, para o aspecto de 16:9, o padding-top deve ser de 56,25%, porque:

9/16 = 0,5625

Voltando a minha demanda, a proporção de uma folha A4 é de 3508px por 2480px. Logo o padding-top deveria ser de 70.695553%, porque:

2480/3508 = 0,70695553

RESPONSIVIDADE

Para utilizarmos de forma responsiva em diversos tamanhos de tela, devemos definir o width em unidades do CSS moderno, como porcentagem (%) ou viewport (vw).

Por exemplo, podemos criar uma div pai com width de 80vw, e a div filha com padding-top de 56.25%, para manter a proporção widescreen (16:9).

Como agora temos uma div com tamanho proporcional para todos os tamanhos de tela, podemos inserir conteúdo dentro dela. Para isso precisamos definir o width em 100% e a propriedade position em relative.

Dentro dessa div proporcional, criaremos outra div com position absolute, width e height de 100%, com alinhamentos left 0 e top 0.

Resta agora você adicionar o conteúdo conforme desejar.

Importante: para um resultado proporcional dos elementos internos, usar a mesma unidade de medida da div pai, por exemplo, utilizar tamanho de fontes também na unidade viewport (vw).

Futuramente os browsers terão suporte a uma nova propriedade de CSS chamada aspect-ratio, que possui a mesma finalidade. Enquanto isso, vamos usando o "padding trick/hack", afinal padding é suportado tanto em navegadores atuais quanto os desatualizados.