CSS – O Truque/Hack do Padding Y

Paulo Diniz — Wed, 04 Jan 2023 14:07:28 +0000

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.
No exemplo a seguir, defini a cor de background "tomato", para tornar perceptível o formato aplicado pelo preenchimento:

O resultado no navegador será este:

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

No código:

No navegador:

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).

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

Agora, ao diminuir ou aumentar a tela, o resultado será este:

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

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

O resultado será este:

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.

DEV Community: Paulo Diniz

CSS – O Truque/Hack do Padding Y

UMA BREVE EXPLICAÇÃO

RESPONSIVIDADE