Guida CSS interattiva: Width e height

Q: Che differenza c'è tra width: 100% e width: auto?

Per un elemento di blocco, auto riempie il contenitore includendo padding e bordo. width: 100% rende la larghezza del contenuto uguale a quella del contenitore, quindi con il box-sizing: content-box predefinito qualsiasi padding o bordo fa strabordare l'elemento.

Q: Che differenza c'è tra width e max-width?

width imposta una dimensione esatta. max-width imposta un limite superiore: l'elemento può essere più stretto, per esempio su un telefono, ma mai più largo. width: 100%; max-width: 600px; riempie gli schermi piccoli e si ferma a 600px su quelli grandi.

Q: Come faccio a far occupare a un elemento tutta l'altezza dello schermo?

Usa min-height: 100vh (o 100dvh per tenere conto delle barre del browser su mobile). min-height invece di height permette alla sezione di crescere se il suo contenuto è più alto dello schermo.

Impostare width e height

width e height impostano la dimensione del content box di un elemento. Di default, padding e bordo si aggiungono all'esterno di quella dimensione.

<!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>

Il box misura 260 per 100 pixel: 240 per 80 di contenuto più 10px di padding su ogni lato. Con box-sizing: border-box misurerebbe esattamente 240 per 80; la pagina sul box model spiega entrambi i casi.

Valori

Valore	Esempio	Significato
`auto`	`width: auto`	Il valore predefinito. I blocchi riempiono la larghezza del contenitore; l'altezza si adatta al contenuto
Lunghezza	`300px`, `20rem`	Una dimensione fissa
Percentuale	`50%`	Della larghezza del blocco contenitore (per `width`) o della sua altezza (per `height`)
Unità viewport	`100vh`, `50vw`, `100dvh`	Della finestra del browser
`min-content`	`width: min-content`	Il più stretto possibile, decide la parola più lunga
`max-content`	`width: max-content`	Largo quanto il contenuto su una sola riga
`fit-content`	`width: fit-content`	Come `max-content`, ma mai più largo del contenitore

Perché height: 100% non fa nulla

Una height in percentuale ha bisogno di un genitore con un'altezza definita di cui essere la percentuale. Quando l'altezza del genitore è auto, che è il caso normale, anche height: 100% del figlio si comporta come 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>

Il primo figlio è alto solo quanto il suo testo. Il secondo riempie il genitore perché il genitore ha un'altezza. Per far funzionare un'intera pagina con le percentuali, ogni antenato fino a html e body ha bisogno di un'altezza, ed è per questo che la maggior parte dei layout usa invece flexbox o grid: i loro figli si allungano per riempire lo spazio senza alcuna percentuale.

min-height e max-width: dimensioni che si adattano

Le dimensioni fisse si rompono facilmente: un'altezza fissa straborda quando il testo è più lungo del previsto, e una larghezza fissa è troppo larga per un telefono. Le proprietà min- e max- impostano dei limiti invece di dimensioni esatte.

Proprietà	Significato
`min-width`	Mai più stretto di così
`max-width`	Mai più largo di così
`min-height`	Mai più basso di così, ma può crescere
`max-height`	Mai più alto di così (il contenuto in più straborda)

<!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>

Su uno schermo più stretto di 360px, come quello di un telefono, le card si restringono insieme a lui, perché max-width è solo un tetto.

Quando si applicano insieme una dimensione e un limite, vincono i limiti: max-width batte width, e min-width batte max-width.

width: auto vs width: 100%

Per un elemento di blocco, lasciare width su auto è quasi sempre quello che vuoi. auto fa stare l'intero box, padding e bordo inclusi, nel contenitore. 100% rende il contenuto largo quanto il contenitore e poi aggiunge sopra padding e bordo:

<!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% resta utile sugli elementi che di default non sono blocchi (un <input>, un <img>, un inline-block), idealmente insieme a box-sizing: border-box.

Adattare la dimensione al contenuto: fit-content

Per rendere un blocco largo solo quanto il suo testo, senza trasformarlo in inline-block, usa 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 con margin-inline: auto centra un'etichetta o un blocco simile a un pulsante che resta largo esattamente quanto il suo testo.

Sezioni ad altezza piena e unità viewport

vh è l'1% dell'altezza del viewport e vw l'1% della sua larghezza. Sui telefoni, la barra degli indirizzi del browser si allarga e si restringe mentre scorri, quindi 100vh può essere più alto di quello che vedi. L'unità dinamica dvh segue l'area visibile, e svh usa l'altezza visibile più piccola:

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

Usa min-height, non height, per le sezioni a schermo intero, così anche uno schermo piccolo con molto testo ha una sezione che cresce. Un'altezza fissa con un contenuto che non ci sta lo fa strabordare, ed è di questo che si occupa la pagina su overflow in CSS.

Errori comuni

height: 100% dentro un genitore senza altezza. Si comporta come auto. Dai un'altezza al genitore o usa flex o grid.
width: 100% più padding. L'elemento esce dal suo contenitore. Lascia le larghezze dei blocchi su auto, oppure usa box-sizing: border-box.
Altezze fisse sui contenitori di testo. Usa min-height così un testo più lungo o un font più grande non straborda.
width su un elemento inline. <span> e <a> ignorano width e height; rendili inline-block o block.
width: 1200px sul contenitore della pagina. Scorre di lato su ogni telefono. Usa invece max-width: 1200px.

Domande frequenti

Perché height: 100% non funziona?

Un'altezza in percentuale è una percentuale dell'altezza del genitore, e funziona solo quando quell'altezza è definita. Se l'altezza del genitore è auto (dipende dal suo contenuto), la percentuale viene trattata come auto. Dai un'altezza al genitore, oppure usa flexbox o grid, che allungano i figli senza percentuali.

Che differenza c'è tra width: 100% e width: auto?

Per un elemento di blocco, auto riempie il contenitore includendo padding e bordo. width: 100% rende la larghezza del contenuto uguale a quella del contenitore, quindi con il box-sizing: content-box predefinito qualsiasi padding o bordo fa strabordare l'elemento.

Cosa fa min-height in CSS?

Imposta l'altezza minima che un elemento può avere, lasciandolo comunque crescere con il suo contenuto. min-height: 200px dà 200px a una card vuota, e una card con più testo diventa più alta invece di strabordare, cosa che una height fissa non permetterebbe.

Che differenza c'è tra width e max-width?

width imposta una dimensione esatta. max-width imposta un limite superiore: l'elemento può essere più stretto, per esempio su un telefono, ma mai più largo. width: 100%; max-width: 600px; riempie gli schermi piccoli e si ferma a 600px su quelli grandi.

Come faccio a far occupare a un elemento tutta l'altezza dello schermo?

Usa min-height: 100vh (o 100dvh per tenere conto delle barre del browser su mobile). min-height invece di height permette alla sezione di crescere se il suo contenuto è più alto dello schermo.

Concetti correlati