CSS – O Truque/Hack do Padding Y
Tags: css, webdev, tutorial, beginners
Published: 2023-01-04 14:07:28

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.
<br />

## 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:

![código descrito na IDE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obr1ns1moue38cewhl3t.png)<br />
O resultado no navegador será este:

![Resultado no navegador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvn5wi6boulkek5hzpgl.png)<br />
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:

![código descrito na IDE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ht417hzor5eryt8cjryn.png)
<br />
No navegador:

![Resultado no navegador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7s4uwc9w95pjd9gjmcd.png)
<br />
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**
<br />
## 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).

![código descrito na IDE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dce487a3j3134yr3ijlc.png)
<br />
Agora, ao diminuir ou aumentar a tela, o resultado será este:

![Resultado no navegador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hswbcx5twhc2e0bs4ioo.gif)
<br />
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`:

![código descrito na IDE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g79vjkr6ibt9fu0rwuav.png)
<br />
Dentro dessa `div` proporcional, criaremos outra `div` com `position absolute`, `width` e `height` de 100%, com alinhamentos `left` 0 e `top` 0.

![código descrito na IDE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cvt5tou9be8elf2vf0j.png)
<br />
O resultado será este:

![Resultado no navegador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipcmsu5nb21ge80ipuxn.png)
<br />
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).
<br />
Futuramente os browsers terão suporte a uma nova propriedade de CSS chamada [**aspect-ratio**](https://developer.mozilla.org/en-US/docs/Web/CSS/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.