Prerequisiti: sintassi CSS, classi, margin, padding e bordi.
Le proprietà CSS per le dimensioni
Gli elementi della pagina occupano uno spazio. Con CSS possiamo impostarne le dimensioni, lasciare che si adattino al contenuto oppure stabilire limiti minimi e massimi.
Una dimensione fissa può essere adatta a un’icona; un paragrafo, invece, deve spesso adattarsi alla lunghezza del testo e alla larghezza dello schermo. La scelta dipende dal contenuto e dal layout.
Come leggere le anteprime
Il contenitore giallo è largo 280 pixel nell’area del contenuto. Il riquadro azzurro permette di osservare la dimensione impostata. Ogni esempio ha HTML e CSS completi ed è isolato dagli stili del sito.
1. Larghezza e altezza
Width e height impostano larghezza e altezza. Negli esempi usiamo border-box: le dimensioni comprendono anche padding e bordo.
| Proprietà o valore | Descrizione | Esempio HTML e CSS | Risultato |
|---|---|---|---|
width | Imposta la larghezza. Accetta misure, percentuali e parole chiave come auto. Con border-box include contenuto, padding e bordo. | HTML | Il riquadro è largo 180 pixel complessivi. Il contenitore è largo 280 pixel. |
height | Imposta l’altezza. Un’altezza fissa non aumenta automaticamente se il contenuto ha bisogno di più spazio. | HTML | Il riquadro è alto 120 pixel complessivi. |
width: auto | Nel normale flusso dei blocchi, la larghezza automatica di un div si adatta allo spazio disponibile tenendo conto di padding, bordi e margini. Il comportamento cambia in altri layout. | HTML | Il riquadro occupa la larghezza disponibile nel contenitore. |
height: auto | Nel normale flusso dei blocchi, l’altezza automatica si adatta al contenuto. È il comportamento abituale di un div. | HTML | Il testo va a capo e il riquadro diventa abbastanza alto per contenerlo. |
width: percentuale | Nel normale layout a blocchi, la percentuale è calcolata rispetto alla larghezza del blocco di riferimento. | HTML | Il riquadro è largo 140 pixel: metà dei 280 pixel dell’area interna del contenitore. |
2. Larghezze minime e massime
Min-width e max-width stabiliscono limiti. Sono utili per evitare riquadri troppo stretti o troppo larghi.
| Proprietà o valore | Descrizione | Esempio HTML e CSS | Risultato |
|---|---|---|---|
min-width | Imposta la larghezza minima. Se width richiede una dimensione inferiore, prevale il limite minimo. | HTML | Il riquadro è largo 180 pixel, non 100. |
max-width | Imposta la larghezza massima. Se width richiede una dimensione superiore, il limite massimo la riduce, salvo un limite minimo più grande. | HTML | Il riquadro non supera 200 pixel, anche se il contenitore ne offre 280. |
min-width e max-width insieme | Delimitano un intervallo. Se il minimo supera il massimo, il minimo prevale. | HTML | Il 90% del contenitore sarebbe 252 pixel; max-width limita il risultato a 220 pixel. |
3. Altezze minime e massime
Min-height permette a un elemento di crescere oltre una misura minima. Max-height limita l’altezza, ma non nasconde da sola il contenuto in eccesso.
| Proprietà o valore | Descrizione | Esempio HTML e CSS | Risultato |
|---|---|---|---|
min-height | Imposta l’altezza minima. Se height è auto, il riquadro può diventare più alto quando il contenuto lo richiede. | HTML | Anche con poco testo il riquadro è alto almeno 120 pixel. |
max-height | Imposta l’altezza massima. Si può combinare con overflow: auto per rendere scorrevole il contenuto che supera il limite. | HTML | Il riquadro non supera 100 pixel. Scorri al suo interno per leggere il testo completo. |
height: percentuale | Nel normale flusso dei blocchi, una percentuale di altezza richiede generalmente un’altezza definita del blocco di riferimento. Non basta che il genitore contenga del testo. | HTML | Qui il contenitore ha height: 160px. Il riquadro è alto 80 pixel. La regola del contenitore è mostrata nel codice. |
4. Il modello di calcolo: box-sizing
Box-sizing stabilisce se width e height misurano soltanto il contenuto oppure comprendono anche padding e bordo. Margin rimane esterno in entrambi i casi.
| Proprietà o valore | Descrizione | Esempio HTML e CSS | Risultato |
|---|---|---|---|
box-sizing: content-box | È il valore iniziale. Padding e bordo si aggiungono alla larghezza e all’altezza impostate. | HTML | La larghezza complessiva è 228 pixel: 180 + 40 di padding + 8 di bordo. |
box-sizing: border-box | Le dimensioni impostate comprendono contenuto, padding e bordo. Il contenuto occupa lo spazio rimanente. | HTML | La larghezza complessiva è 180 pixel. L’area del contenuto è larga 132 pixel: 180 − 40 − 8. |
5. Misure e unità
| Unità o valore | Riferimento | Esempio |
|---|---|---|
| px | Pixel CSS, che non coincidono necessariamente con singoli pixel fisici dello schermo. | width: 240px; |
| % | Il riferimento dipende dalla proprietà e dal layout. Per width nel normale flusso è la larghezza del blocco di riferimento. | width: 80%; |
| rem | Dimensione del carattere dell’elemento radice html. Se è 16px, 20rem equivale a 320px. | max-width: 20rem; |
| vw | 1vw equivale all’1% della larghezza del viewport di riferimento. | width: 50vw; |
| vh | 1vh equivale all’1% dell’altezza del viewport di riferimento. Sui dispositivi mobili il viewport può variare con le barre del browser. | min-height: 50vh; |
| auto | Il browser determina la dimensione secondo le regole del layout e il contenuto. Non è un’unità di misura. | height: auto; |
Per dimensioni che seguono l’altezza attualmente disponibile su dispositivi mobili esiste anche dvh: per esempio min-height: 100dvh;. Le unità del viewport si approfondiscono nelle lezioni sul responsive design.
Misure logiche
Le proprietà inline-size e block-size seguono la direzione di scrittura. Nella normale scrittura orizzontale italiana corrispondono, rispettivamente, a width e height. Esistono anche min-inline-size, max-inline-size, min-block-size e max-block-size.
.scheda {
inline-size: 100%;
max-inline-size: 30rem;
min-block-size: 10rem;
}6. Un riquadro che si adatta alla pagina
Combinando width e max-width otteniamo un riquadro che si restringe quando lo spazio è poco, ma non diventa eccessivamente largo. L’altezza rimane automatica per contenere il testo.
HTML
<div class="scheda"><h2>Una scheda flessibile</h2><p>Questo contenuto si adatta alla larghezza disponibile. Il riquadro cresce in altezza quando il testo occupa più righe.</p></div>CSS
.scheda {
width: 100%;
max-width: 420px;
box-sizing: border-box;
margin: 20px auto;
padding: 20px;
border: 2px solid #17365d;
border-radius: 10px;
background-color: #dceeff;
color: #17365d;
}Risultato
La scheda non supera 420 pixel. Quando il contenitore è più stretto, usa la larghezza disponibile.
Mantenere le proporzioni con aspect-ratio
La proprietà aspect-ratio assegna un rapporto preferito tra larghezza e altezza. È utile quando almeno una delle due dimensioni è automatica.
HTML
<div class="video">Un riquadro in formato 16:9</div>CSS
.video {
width: 100%;
max-width: 320px;
aspect-ratio: 16 / 9;
box-sizing: border-box;
padding: 12px;
border: 2px solid #17365d;
background-color: #dceeff;
}Risultato
Con una larghezza di 320 pixel, il rapporto 16:9 suggerisce un’altezza di 180 pixel. Se entrambe le dimensioni sono fisse, aspect-ratio non le sostituisce. Il contenuto e i limiti minimi e massimi possono influenzare il risultato finale.
7. Immagini e contenuto in eccesso
Per permettere a un’immagine di restringersi senza superare la larghezza disponibile e mantenendo le sue proporzioni, un’impostazione comune è:
img {
max-width: 100%;
height: auto;
}Max-width limita l’immagine senza ingrandirla necessariamente fino alla larghezza del contenitore. Con width: 100%, invece, le chiediamo di occupare quella larghezza e possiamo ingrandirla oltre la sua dimensione naturale.
Se assegni a un’immagine sia una larghezza sia un’altezza fisse, può risultare deformata. Per un riquadro con dimensioni definite puoi usare object-fit: cover; per riempirlo mantenendo le proporzioni, accettando un possibile ritaglio, oppure object-fit: contain; per mostrare l’intera immagine.
Overflow non modifica la dimensione del testo
| Valore | Effetto |
|---|---|
overflow: visible; | Il contenuto può essere visibile fuori dal riquadro. È il comportamento iniziale comune. |
overflow: auto; | Permette lo scorrimento quando il contenuto supera l’area disponibile. |
overflow: hidden; | Nasconde l’eccedenza senza mostrare barre di scorrimento. Usalo solo quando il ritaglio è intenzionale. |
Funzioni per combinare misure
Dopo aver compreso le proprietà di base, possiamo usare funzioni come calc(), min(), max() e clamp():
.scheda {
width: calc(100% - 40px);
max-width: 600px;
}
.pannello {
width: min(90%, 600px);
}
.titolo {
font-size: clamp(1.5rem, 4vw, 3rem);
}Calc() esegue un calcolo tra misure; min() sceglie il valore minore; max() sceglie il maggiore. Clamp() indica un limite minimo, un valore preferito e un limite massimo. Sono strumenti utili per il responsive design.
Problemi frequenti
- Il riquadro esce dal contenitore: controlla larghezza, padding, bordo, margini e box-sizing. Con content-box, width: 100% più padding può superare la larghezza disponibile.
- Il testo viene tagliato: controlla height, max-height e overflow. Per contenuti di lunghezza variabile valuta height: auto o min-height.
- Height: 100% non produce l’altezza attesa: verifica se il blocco di riferimento ha un’altezza definita.
- Un elemento flex o grid non si restringe: la dimensione minima automatica può dipendere dal contenuto. In alcuni layout serve min-width: 0, insieme a una corretta gestione del testo e dello scorrimento.
- Width e height non cambiano un normale span: queste proprietà non dimensionano un elemento inline non sostituito come un riquadro a blocco. Valuta display: inline-block quando serve.
- Minimo e massimo sono in conflitto: un minimo maggiore del massimo prevale sul massimo. Evita limiti incompatibili.