Corso di CSS / Larghezza, altezza, limiti min/max e box-sizing

La larghezza e l'altezza in CSS definiscono le dimensioni preferite, mentre min-width, max-width, min-height e max-height impongono dei limiti. Con box-sizing: border-box, le dimensioni dichiarate includono padding e bordi, ma un limite di altezza richiede comunque una strategia di overflow deliberata.

Confronta content-box e border-box

Dai a entrambe le schede width: 300px, 20px di padding su ogni lato e bordi da 2px. Con content-box, il contenuto è di 300px e il border-box è di 344px. Con border-box, il border-box è di 300px e il contenuto è di 256px. Il margine è al di fuori della larghezza dichiarata in entrambi i casi. Vedi Modello a scatola CSS: contenuto, padding, bordo e margine.

border-box mantiene padding e bordi all'interno della dimensione dichiarata. Aumentare il padding riduce la larghezza disponibile per il contenuto e può aumentare l'andata a capo. Se solo il padding e i bordi superano la larghezza dichiarata, il contenuto non può diventare negativo, quindi la scatola effettiva può superare quella larghezza. Vedi MDN: box sizing.

*, *::before, *::after { box-sizing: border-box; }

Regole comuni che possono essere utilizzate per uniformare i metodi di calcolo nei nuovi documenti. Abbiamo incluso anche gli pseudo-elementi da calcolare nello stesso modo. Se lo applichi a pagine esistenti in batch, il layout creato in base al content-box può cambiare, quindi verifica prima l'area necessaria. L'esempio completo applica le regole comuni, ma riassegna il content-box solo a .content per confronto.

Imposta larghezze fluide e limiti minimi o massimi

.fluid { width: 100%; max-width: 32rem; min-height: 10rem; }

.limits { width: 100%; min-width: 180px; max-width: 320px; }

width: 100% si basa sulla larghezza del blocco contenitore, e max-width la limita dal crescere troppo su schermi ampi. A condizione che la dimensione del font radice sia 16px, 32rem corrispondono a 512px. min-width è il limite inferiore di quanto possa essere piccola. Anche se lo schermo è più stretto di 180px, mantenere la larghezza minima può causare un overflow orizzontale.

Un vincolo minimo prevale quando entra in conflitto con un massimo: min-width: 360px con max-width: 320px non permette al box di ridursi sotto i 360px. I vincoli di altezza corrispondenti si comportano in modo simile. I minimi automatici di Flexbox e Grid richiedono controlli propri; usa min-width: 0 dove necessario. Vedi MDN: min width, MDN: min height.

Confronta altezze automatiche, fisse e vincolate

Un limite di altezza non rimuove automaticamente il testo traboccante. L'overflow predefinito può mostrarlo fuori dalla casella; 'hidden' può tagliare informazioni di cui il lettore ha bisogno. Quando si combina l'altezza massima con lo scorrimento, controllare anche l'accesso da tastiera e l'interazione mobile. L'esempio completo lascia spazio extra dopo le caselle in modo da poter osservare il fallimento dell'altezza fissa. Se una casella non si riduce come previsto, rivedere anche Overflow CSS, testo lungo a capo e puntini di sospensione.

Comprendere le condizioni dell'altezza percentuale

.height-parent { height: 200px; }

.half { height: 50%; }

Nel normale flusso dei blocchi, un elemento padre con un'altezza esplicita di 200px permette al height: 50% di un figlio di risolversi in 100px. Se l'altezza del padre dipende dal contenuto, quel semplice calcolo di solito si risolve invece come auto. Solo un'altezza minima non fornisce la stessa condizione. Il posizionamento assoluto, Flexbox e Grid possono avere regole diverse per la risoluzione delle percentuali. Vedi MDN: height.

Esegui l'esempio e confronta le dimensioni

Salva il codice qui sotto in UTF-8 in sizing.html. Include due calcoli di larghezza, un limite di dimensione e un confronto di altezza con lo stesso testo.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing width and height</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .compare { width: 300px; padding: 20px; border: 2px solid #3d6b89;
      margin-block: 16px; background: #eef6fa; }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; }
    .fluid { width: 100%; max-width: 32rem; min-height: 10rem;
      padding: 24px; border: 2px solid #3d6b89; }
    .limits { width: 100%; min-width: 180px; max-width: 320px;
      padding: 12px; border: 1px solid #777; margin-block: 16px; }
    .height-box { width: 100%; max-width: 300px; padding: 12px;
      border: 2px solid #b98022; margin-block-end: 16px; }
    .height-box p { margin: 0; }
    .fixed { height: 96px; margin-block-end: 120px; }
    .minimum { min-height: 160px; }
    .limited { max-height: 96px; overflow: auto; }
    .height-parent { height: 200px; max-width: 300px; background: #eee; }
    .half { height: 50%; background: #cbe8d7; }
  </style>
</head>
<body>
  <h1>Comparing element sizes</h1>
  <h2>Same width: 300px</h2>
  <div class="compare content">content-box：344px to border</div>
  <div class="compare border">border-box：300px to border</div>
  <h2>Fluid width with minimum and maximum limits</h2>
  <div class="fluid">The maximum width is 32rem and the minimum height is 10rem. Try adding more sentences.</div>
  <div class="limits">The width is at least 180px and at most 320px.</div>
  <h2>fixed height 96px</h2><div class="height-box fixed"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Height that fits the content</h2><div class="height-box"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Minimum height: 160px</h2><div class="height-box minimum"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Maximum height: 96px, with scrolling</h2><div class="height-box limited" tabindex="0" role="region" aria-label="Maximum Height Comparison"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>200px height of 50% of parent</h2><div class="height-parent"><div class="half">Height: 100px</div></div>
</body>
</html>

1. Controlla la larghezza effettiva di .content e .border in una finestra ampia. Sono rispettivamente 344px e 300px. Se cambi solo il padding del content-box a 30px, sarà 364px, e la larghezza esterna del border-box sarà 300px anche dopo la stessa modifica.
2. Riduci la larghezza della finestra per vedere se .fluid si restringe con il suo genitore. In una finestra ampia con root di 16px, il massimo è 512px. Se cambi brevemente il min-width in .limits a 360px, sarà più grande del max-width di 320px. Ripristinalo a 180px.
3. Aggiungi lo stesso testo ai quattro box di confronto altezza. Con l’altezza fissa, il testo dovrebbe uscire dai limiti, auto e min-height dovrebbero crescere secondo necessità, e il pannello con max-height dovrebbe essere leggibile con lo scorrimento interno.
4. Rimuovere height: 200px dal genitore. Verificare che l'altezza del 50% del figlio non rimanga più a 100px, e ripristinare la dichiarazione originale per assicurarsi che tornino a essere 100px.
5. Aumenta lo zoom del browser e verifica che il testo rimanga leggibile fino all’ultima frase. Per una prova separata, aumenta il font di body da 16px a 20px: in questo esempio è fissato in pixel, quindi cambiare soltanto il font predefinito del browser non equivale a modificarlo. Confronta il risultato con height: auto e ripristina infine 16px e lo zoom iniziale.

width: 100%, ma se trabocca orizzontalmente, controllare box-sizing, margini sinistro e destro, min-width grande e stringa lunga in quest'ordine. Non confondere la dimensione del contenuto mostrato negli Strumenti per sviluppatori con la dimensione del box fino al bordo. Dopo aver cambiato il valore, tornare alla dichiarazione originale per mantenere la condizione di confronto.