O que você não sabe sobre o cálculo de margens percentuais em CSS
A maioria dos web designers acha que conhece bem o CSS. Afinal de contas, não há muita coisa nisso - alguns tipos de seletores, algumas dúzias de propriedades e algumas regras em cascata que você mal precisa lembrar já que elas se resumem ao bom senso. Mas quando você chega ao nível básico, há muitos detalhes obscuros que poucos designers realmente entendem.
Quando eu examinei os resultados de um teste CSS gratuito que ofereci online nos últimos seis meses, descobri uma pergunta que quase ninguém acertou. Dos milhares de pessoas que fizeram o teste, menos de 14% acertaram.
A questão se resume a isso: Como você calcula margens percentuais?
A questão
Digamos que seu site tenha um contêiner div, e dentro disso, um conteúdo div:
Agora, vamos dar esse conteúdo div uma margem superior:
.conteúdo margin-top: 10%;
Ok, então são 10%… mas 10% dos que? Essa é a questão que apenas 13,8% das pessoas podem responder corretamente. E tenha em mente: essas pessoas têm acesso ao Google!
O que eu amo nessa questão é que parece que a resposta deveria ser óbvia. Tanto que suspeito que a maioria das pessoas apenas adivinhe (e adivinhe errado). Mas talvez seja não faz parece óbvio para você. Quero dizer, se você realmente usa sua imaginação, há muitas maneiras de o navegador calcular uma margem como essa.
Então, como se eu reduzi-lo para você desde que a pergunta no teste é realmente múltipla escolha. Aqui estão as suas opções:
- 10% da altura do conteúdo do div
- 10% da altura do div do contêiner
- 10% da largura do conteúdo do div
- 10% da largura do div do contêiner
Lembre-se, apenas 13,8% das pessoas podem escolher a resposta certa nesta lista. Isso é muito pior que o acaso!
Olhe atentamente para as respostas; você verá que existem apenas duas coisas que você precisa saber:
Recipiente ou Conteúdo?
Primeiro, é o tamanho da margem com base no tamanho do próprio conteúdo div ou no tamanho do contêiner div?
Agora isso não é um gimme, mas você provavelmente pode confiar em seus instintos. Se eu definir um div para ser 50% da largura do seu contêiner, e então eu quero que suas margens esquerda e direita preencham o resto do espaço, eu naturalmente defini-los para 25% cada (então as porcentagens somam 100%). Para que isso funcione, as margens percentuais devem ser baseadas nas dimensões do contêiner.
Com certeza, dois terços das pessoas que fazem o teste acertam essa parte da resposta.
Largura ou Altura?
Segundo, é o tamanho da margem superior com base na largura ou na altura desse elemento?
Se você está prestando atenção, você provavelmente já está em guarda. Para tão poucas pessoas escolherem a resposta certa, isso tem que ser uma?
E, no entanto, eu aposto que você mal consegue acreditar a resposta não é altura. Bem, não é.
Sim, estamos falando de uma margem superior aqui. Sim, o tamanho dessa margem é uma medida vertical. Sim, se um bloco tiver 50% da altura do contêiner e você tiver uma margem superior de 25%, você esperaria que esse seja 25% da altura do contêiner. E você estaria errado.
Não se sinta mal se você pensou que tinha que ser altura. Quase 80% das pessoas que fazem o teste concordam com você:
Faz sentido… não, realmente!
Ainda não acredita? Aqui está uma citação da especificação CSS do W3C:
A porcentagem é calculada com relação à largura do bloco contendo a caixa gerada. Note que isto é verdade para margem superior e margem inferior também.
O mesmo vale para top e bottom padding, caso você esteja se perguntando. Quanto às fronteiras, é ilegal especificar sua largura como uma porcentagem.
Então, neste ponto, você provavelmente está pensando que os criadores de CSS são ou maluco, ou eles apenas cometeram um erro realmente estúpido. Mas estou aqui para lhe dizer, há duas boas razões para basear margens verticais na largura do bloco que contém:
Consistência Horizontal e Vertical
Há, é claro, uma propriedade abreviada que permite especificar a margem para todos os quatro lados de um bloco:
margem: 10%;
Isso se expande para:
margem superior: 10%; margem-direita: 10%; margem-fundo: 10%; margem esquerda: 10%;
Agora, se você escreveu um dos itens acima, você provavelmente esperaria que as margens em todos os quatro lados do bloco fossem do mesmo tamanho, não é? Mas se margin-left e margin-right foram baseados na largura do container, e margin-top e margin-bottom foram baseados em sua altura, então eles normalmente seriam diferentes!
Evitando a Dependência Circular
O CSS coloca o conteúdo em blocos empilhados verticalmente na página, de modo que a largura de um bloco geralmente é ditada inteiramente pela largura de seu pai. Em outras palavras, você pode calcular a largura de um bloco sem se preocupar com o que é dentro aquele bloco.
A altura de um bloco é uma questão diferente. Geralmente, a altura depende da altura combinada de seu conteúdo. Altere a altura do conteúdo e altere a altura do bloco. Veja o problema?
Para obter a altura do conteúdo, você precisa conhecer as margens superior e inferior que são aplicadas a ele. E se essas margens dependem da altura do bloco pai, você está com problemas, porque você não pode calcular um sem conhecer o outro!
Baseando margens verticais no largura do contêiner quebra essa dependência circular e possibilita o layout da página.
Ace a classe
Então aí está: a pergunta mais difícil do teste e agora você pode responder. Quer saber como você faria no resto do teste? Tente você mesmo. Eu prometo, a maioria das perguntas são muito mais fáceis do que esta.
Enquanto isso, estou em busca de uma nova pergunta mais difícil! Que detalhe de CSS você acha que ninguém sabe?
Nota do editor: Isto é escrito para o Hongkiat.com por Kevin Yank. Kevin escreve sobre a web desde 1999, com livros sobre PHP, CSS e JavaScript para o seu nome. Ele também recebeu podcasts, falou em conferências e produziu treinamento em vídeo, tudo sobre a web. Ele agora lidera a equipe de desenvolvimento do Sit the Test, um aplicativo da web para fazer e realizar testes on-line.
Mais sobre Hongkiat:
- Web design: altura de coluna igual com CSS
- 6 CSS Tricks para alinhar o conteúdo verticalmente
- Uma olhada nas unidades CSS: pixels, EM e porcentagem
- Uma olhada em: CSS3 Box-Sizing
Agora leia: 10 propriedades CSS3 ocultas que você deve saber
