Docs executáveis de CSS: Width e height

Q: Qual a diferença entre width: 100% e width: auto?

Em um elemento de bloco, auto preenche o contêiner incluindo o padding e a borda. width: 100% define a largura do conteúdo igual à largura do contêiner, então com o box-sizing: content-box padrão qualquer padding ou borda faz o elemento transbordar.

Q: Qual a diferença entre width e max-width?

width define um tamanho exato. max-width define um limite máximo: o elemento pode ser mais estreito, por exemplo no celular, mas nunca mais largo. width: 100%; max-width: 600px; preenche telas pequenas e para em 600px nas grandes.

Q: Como deixar um elemento com a altura da tela inteira?

Use min-height: 100vh (ou 100dvh, para levar em conta as barras do navegador no celular). min-height em vez de height deixa a seção crescer se o conteúdo for mais alto que a tela.

Definir width e height

width e height definem o tamanho da caixa de conteúdo de um elemento. Por padrão, o padding e a borda são somados por fora desse tamanho.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

A caixa tem 260 por 100 pixels: 240 por 80 de conteúdo, mais 10px de padding de cada lado. Com box-sizing: border-box, ela teria exatamente 240 por 80; a página do box model explica os dois casos.

Valores

Valor	Exemplo	Significado
`auto`	`width: auto`	O padrão. Blocos ocupam a largura do contêiner; a altura se ajusta ao conteúdo
Comprimento	`300px`, `20rem`	Um tamanho fixo
Porcentagem	`50%`	Da largura (para `width`) ou da altura (para `height`) do bloco que o contém
Unidades de viewport	`100vh`, `50vw`, `100dvh`	Da janela do navegador
`min-content`	`width: min-content`	O mais estreito possível, quem decide é a palavra mais longa
`max-content`	`width: max-content`	Tão largo quanto o conteúdo em uma linha
`fit-content`	`width: fit-content`	Como `max-content`, mas nunca mais largo que o contêiner

Por que height: 100% não faz nada

Um height em porcentagem precisa de um pai com altura definida para servir de base. Quando a altura do pai é auto, que é o caso normal, o height: 100% do filho também se comporta como auto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

O primeiro filho tem só a altura do texto. O segundo preenche o pai porque o pai tem uma altura. Para fazer a cadeia funcionar com porcentagens na página toda, cada ancestral até html e body precisa de uma altura, e é por isso que a maioria dos layouts usa flexbox ou grid: os filhos deles se esticam para preencher sem nenhuma porcentagem.

min-height e max-width: tamanhos que se adaptam

Tamanhos fixos quebram fácil: uma altura fixa transborda quando o texto é maior que o esperado, e uma largura fixa é larga demais para um celular. As propriedades min- e max- definem limites em vez de tamanhos exatos.

Propriedade	Significado
`min-width`	Nunca mais estreito que isso
`max-width`	Nunca mais largo que isso
`min-height`	Nunca mais baixo que isso, mas pode crescer
`max-height`	Nunca mais alto que isso (o conteúdo extra transborda)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

Em uma tela com menos de 360px, como a de um celular, os cards encolhem junto, porque max-width é só um teto.

Quando um tamanho e um limite se aplicam ao mesmo tempo, os limites vencem: max-width vence width, e min-width vence max-width.

width: auto vs width: 100%

Em um elemento de bloco, deixar width em auto é quase sempre o que você quer. auto encaixa a caixa inteira, com padding e borda, no contêiner. 100% deixa o conteúdo tão largo quanto o contêiner e depois soma o padding e a borda por cima:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

width: 100% continua útil em elementos que não são blocos por padrão (um <input>, um <img>, um inline-block), de preferência junto com box-sizing: border-box.

Ajustar ao conteúdo: fit-content

Para deixar um bloco só com a largura do texto, sem trocá-lo para inline-block, use fit-content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

fit-content com margin-inline: auto centraliza um rótulo ou um bloco com cara de botão que fica exatamente com a largura do texto.

Seções com altura da tela e unidades de viewport

vh é 1% da altura da viewport e vw 1% da largura. No celular, a barra de endereço do navegador cresce e encolhe conforme você rola, então 100vh pode ser mais alto que a área visível. A unidade dinâmica dvh acompanha a área visível, e svh usa a menor altura visível:

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

Use min-height, não height, em seções de tela cheia, para que uma tela pequena com muito texto tenha uma seção que cresce. Uma altura fixa com conteúdo que não cabe transborda, e é disso que trata a página de overflow no CSS.

Erros comuns

height: 100% dentro de um pai sem altura. Ele age como auto. Dê uma altura ao pai ou use flex ou grid.
width: 100% mais padding. O elemento transborda o contêiner. Deixe a largura dos blocos em auto ou use box-sizing: border-box.
Alturas fixas em contêineres de texto. Use min-height para que um texto maior ou uma fonte maior não transborde.
width em um elemento inline. <span> e <a> ignoram width e height; transforme-os em inline-block ou block.
width: 1200px no invólucro da página. Ele rola para o lado em qualquer celular. Use max-width: 1200px.

Perguntas frequentes

Por que height: 100% não funciona?

Uma altura em porcentagem é uma porcentagem da altura do pai, e só funciona quando essa altura é definida. Se a altura do pai é auto (medida pelo conteúdo), a porcentagem é tratada como auto. Dê uma altura ao pai ou use flexbox ou grid, que esticam os filhos sem porcentagens.

Qual a diferença entre width: 100% e width: auto?

Em um elemento de bloco, auto preenche o contêiner incluindo o padding e a borda. width: 100% define a largura do conteúdo igual à largura do contêiner, então com o box-sizing: content-box padrão qualquer padding ou borda faz o elemento transbordar.

O que o min-height faz no CSS?

Define a menor altura que um elemento pode ter e ainda deixa ele crescer com o conteúdo. min-height: 200px dá 200px a um card vazio, e um card com mais texto fica mais alto em vez de transbordar, o que um height fixo não permitiria.

Qual a diferença entre width e max-width?

width define um tamanho exato. max-width define um limite máximo: o elemento pode ser mais estreito, por exemplo no celular, mas nunca mais largo. width: 100%; max-width: 600px; preenche telas pequenas e para em 600px nas grandes.

Como deixar um elemento com a altura da tela inteira?

Use min-height: 100vh (ou 100dvh, para levar em conta as barras do navegador no celular). min-height em vez de height deixa a seção crescer se o conteúdo for mais alto que a tela.

Conceitos relacionados