search
SITEDISCORD

📏Grandezas de Tamanho

Grandezas de tamanhos em HTML incluem pixels (px) para tamanhos fixos, porcentagens (%) para tamanhos relativos ao pai, em (em) para fontes do pai, e rem (rem) para fontes da raiz.

Quando estamos criando uma página web, precisamos definir o tamanho de elementos como imagens, caixas de texto e outras áreas. Para isso, usamos diferentes unidades de medida. Vamos entender algumas das mais comuns de forma simples:

  1. Pixels (px):

    • Imagine que a tela do seu computador é formada por milhões de pequenos pontos chamados pixels.

    • Quando dizemos que uma imagem tem 100 pixels de largura, estamos dizendo que ela ocupa 100 desses pontinhos na tela.

    • Exemplo:

      <img src="imagem.jpg" width="100px">

  2. Porcentagem (%):

    • Usar porcentagem é como dizer que algo deve ter um certo tamanho em relação a algo maior.

    • Se uma imagem tem 50% de largura, isso significa que ela ocupará metade da largura do contêiner em que está (elemento pai que no caso é a div).

    • Exemplo:

      <div style="width: 80%;">
  <img src="imagem.jpg" width="50%">
</div>

    • Aqui, a imagem terá metade da largura do contêiner que, por sua vez, ocupa 80% da largura da tela.

  3. Em (em):

    • Esta unidade é relativa ao tamanho da fonte do elemento pai.

    • Se a fonte do pai for 16px e definimos uma largura de 2em, o elemento terá 32px de largura (16px * 2).

    • Exemplo:

      <div style="font-size: 16px;">
  <div style="width: 2em;">Conteúdo</div>
</div>

  4. Rem (rem):

    • Semelhante ao em, mas sempre relativa ao tamanho da fonte raiz (geralmente definida no <html>).

    • Se a fonte raiz for 16px, 1rem será sempre 16px, independentemente do pai.

    • Exemplo:

      <div style="width: 3rem;">Conteúdo</div>

hashtag
Resumo

  • Pixels (px): Tamanho fixo em pontos da tela.

  • Porcentagem (%): Tamanho relativo ao elemento pai.

  • Em (em): Tamanho relativo à fonte do elemento pai.

  • Rem (rem): Tamanho relativo à fonte raiz.

Usar essas unidades de medida corretamente ajuda a criar páginas web que ficam bem em diferentes dispositivos e tamanhos de tela.

AnteriorAtributos width e heightPróximoTag <a> para links

Atualizado