Propriedade width e height: Definindo o tamanho do conteúdo

Aprenda a controlar a largura e altura do conteúdo de um elemento.

No Box Model, a área mais central e fundamental é o conteúdo. As propriedades width (largura) e height (altura) são as responsáveis por definir as dimensões dessa área de conteúdo de um elemento.

Controlar a largura e a altura dos seus elementos é essencial para construir layouts, organizar o espaço na página e garantir que seus componentes tenham o tamanho adequado para o conteúdo que eles abrigam.

Pense nas propriedades width e height como as medidas internas de uma caixa de presente. Elas definem o espaço exato onde o presente (o conteúdo) vai caber.

Como usar as propriedades width e height

A sintaxe é simples: você seleciona o elemento e atribui um valor às propriedades width e height.

Sintaxe:

seletor {
  width: valor;
  height: valor;
}

Valores possíveis:

As propriedades width e height aceitam diversos tipos de valores:

  1. Comprimento (px, em, rem, vw, vh, etc.):

    • px (pixels): Define um tamanho fixo em pixels.
      • Exemplo: width: 200px; height: 150px;
      • Uso: Para elementos que precisam de um tamanho exato e não devem escalar.
    • em / rem: Define um tamanho relativo ao font-size (do pai para em, do <html> para rem).
      • Exemplo: width: 10em; height: 5rem;
      • Uso: Para elementos que devem escalar proporcionalmente ao tamanho do texto.
    • vw / vh (viewport width/height): Define um tamanho relativo à largura/altura da viewport.
      • Exemplo: width: 50vw; height: 30vh;
      • Uso: Para elementos que devem escalar com o tamanho da tela, útil para layouts responsivos.

  2. Porcentagem (%):

    • Define a largura ou altura como uma porcentagem do tamanho do elemento pai.
    • Exemplo: width: 50%; height: 100%;
    • Uso: Muito comum para layouts responsivos, onde um elemento deve ocupar uma fração do espaço disponível do seu contêiner.

  3. auto (padrão):

    • O navegador calcula automaticamente a largura ou altura com base no conteúdo do elemento e no contexto.
    • Exemplo: width: auto; (padrão para elementos de bloco, que ocupam 100% da largura disponível).
    • Uso: Quando você quer que o elemento se ajuste naturalmente ao seu conteúdo ou ao espaço disponível.

  4. min-content / max-content / fit-content:

    • Valores mais modernos que permitem que o elemento se ajuste ao tamanho mínimo ou máximo do seu conteúdo, ou uma combinação flexível.
    • Uso: Para layouts mais avançados e flexíveis.

min-width, max-width, min-height, max-height

Além de width e height, existem propriedades que definem limites para o tamanho dos elementos:

  • min-width / max-width: Definem a largura mínima e máxima que um elemento pode ter.
    • Exemplo: max-width: 100%; (garante que o elemento nunca será maior que seu pai, mas pode encolher).
    • Uso: Essencial para responsividade, para evitar que elementos fiquem muito pequenos ou muito grandes.
  • min-height / max-height: Definem a altura mínima e máxima que um elemento pode ter.
    • Exemplo: min-height: 200px; (garante que o elemento sempre terá pelo menos 200px de altura, mesmo que o conteúdo seja menor).
    • Uso: Útil para garantir que um elemento tenha um tamanho mínimo para ser visualmente agradável, ou para evitar que ele cresça demais.

Comportamento com Elementos de Bloco e Inline

  • Elementos de Bloco (block-level):
    • Por padrão, width: auto; faz com que ocupem 100% da largura disponível.
    • height: auto; (padrão) faz com que a altura se ajuste ao conteúdo.
    • Aceitam width e height fixos ou relativos.
  • Elementos Inline (inline-level):
    • Por padrão, width e height não têm efeito em elementos inline. Eles se ajustam ao tamanho do seu conteúdo.
    • Para aplicar width e height a um elemento inline, você precisa mudar seu display para inline-block ou block.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Width e Height</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    .container {
      width: 80%; /* 80% da largura do body */
      margin: 0 auto; /* Centraliza o container */
      border: 2px solid #333;
      padding: 10px;
      margin-bottom: 20px;
    }

    .box {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 10px;
      margin-bottom: 10px;
      text-align: center;
    }

    .box-px {
      width: 200px;
      height: 100px;
    }

    .box-percent {
      width: 50%; /* 50% da largura do .container */
      height: 80px;
      background-color: lightgreen;
    }

    .box-rem {
      width: 15rem; /* 15 * 16px = 240px (se html font-size for 16px) */
      height: 8rem;
      background-color: lightcoral;
    }

    .box-vw {
      width: 30vw; /* 30% da largura da viewport */
      height: 15vh; /* 15% da altura da viewport */
      background-color: lightgoldenrodyellow;
    }

    .box-min-max {
      width: 80%;
      min-width: 250px; /* Nunca menor que 250px */
      max-width: 400px; /* Nunca maior que 400px */
      height: auto; /* Altura se ajusta ao conteúdo */
      min-height: 100px; /* Mínimo de 100px de altura */
      background-color: lightgray;
    }

    .inline-span {
      background-color: yellow;
      padding: 5px;
      /* width: 100px; height: 50px; */ /* Estas propriedades não teriam efeito aqui */
    }

    .inline-block-span {
      display: inline-block; /* Agora aceita width e height */
      background-color: orange;
      width: 100px;
      height: 50px;
      padding: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Exemplos de Width e Height</h2>

    <div class="box box-px">
      Largura: 200px, Altura: 100px
    </div>

    <div class="box box-percent">
      Largura: 50% do pai, Altura: 80px
    </div>

    <div class="box box-rem">
      Largura: 15rem, Altura: 8rem
    </div>

    <div class="box box-vw">
      Largura: 30vw, Altura: 15vh
    </div>

    <div class="box box-min-max">
      Largura: 80% (min 250px, max 400px), Altura mínima: 100px. Redimensione a janela para ver o efeito.
    </div>

    <p>Este é um texto com um <span class="inline-span">span inline</span>. Note que width/height não funcionam aqui.</p>
    <p>Este é um texto com um <span class="inline-block-span">span inline-block</span>. Agora width/height funcionam.</p>
  </div>
</body>
</html>

Resultado: Observe como cada caixa tem suas dimensões controladas de diferentes maneiras. Redimensione a janela do navegador para ver o efeito das unidades relativas e das propriedades min-max.

Boas Práticas:

  • Responsividade: Use unidades relativas (%, em, rem, vw, vh) e min-max propriedades para criar layouts que se adaptam a diferentes tamanhos de tela.
  • max-width: 100%; para imagens: Uma boa prática para imagens é img { max-width: 100%; height: auto; } para garantir que elas nunca estourem seus contêineres e mantenham a proporção.
  • height: auto; (padrão): Geralmente é melhor deixar a altura como auto para que o elemento se ajuste ao seu conteúdo, a menos que você tenha um motivo específico para definir uma altura fixa.
  • min-height: Use min-height em vez de height para garantir um tamanho mínimo sem impedir que o elemento cresça com o conteúdo.
  • display: Lembre-se que width e height não funcionam em elementos inline por padrão. Se precisar aplicá-los, mude o display para inline-block ou block.

Dominar width e height é o primeiro passo para ter controle total sobre o tamanho dos seus elementos e construir layouts precisos e responsivos.