Pubblicato il 16/12/2023 da alnao nella categoria Css3 & Bootstrap

La gestione delle dimensioni degli oggetti è sempre stata un argomento molto delicato in HTML e in CSS, in particolare nelle pagine pensate per essere responsive dove gli oggetti si ridimensionino in base al dispositivo e allo spazio a disposizione. Oltre alle proprietà base di larghezza (width) e altezza (height), dalla terza versione di CSS sono a disposizione quattro proprietà:

  • min-width larghezza minima dell’elemento
  • min-height altezza minima dell’elemento
  • max-width larghezza minima dell’elemento
  • max-height altezza massima dell’elemento

Tutti e quattro i valori assumono valori in pixel, em, percentuale o qualunque altra unità di misura. Queste permettono di non impostare una valore fisso ma di impostare un range, i browser cercano più spazio possibile ma, se lo spazio non è sufficiente, riducono in maniera automatica le dimensioni. Un’altra tecnica per impostare le dimensioni in maniera dinamica è l’uso delle funzioni max (e le altri simili), per esempio:

width: max(50%,100px);

permette di impostare una larghezza della metà (50%) rispetto al contenitore a meno che 100 pizel siano un valore maggiore. Altro metodo molto interessante è clamp che permette di definire tre parametri: un minimo, un predefinito e un massimo, il browser poi calcolerà quale valore usare, alcuni esempi di sistemi statici o combinati con altre funzioni di CSS:

/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);
/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);

si rimanda alla documentazione ufficiale per maggiori dettagli ed altri esempi.

Un’altra proprietà molto usata è inline-size che permette di definire le dimensioni di un elemento nella inline direction, si differenza dai classici width e height perché questa (come block-size) si devono usare per gli oggetti nella modalità inline e block, anche in questo caso si rimanda alla documentazione ufficiale per maggiori dettagli.


Le proprietà CSS gestiscono le misura assolute come inches (in), points (pt), millimetri (mm), picas (pc) ma offrono anche la la possibilità di utilizzare unità relative al contenitore (em), all’elemento (rem) e alla viewport del dispositivo (vw/vh). Provando queste unità di misura in un semplice esempio:

<div>
  <p>ciao em</p>
</div>
<p>ciao rem</p>
  <label>ciao vw</label>

html{
  font-size: 20px;
}
div{
  font-size: 30px;
}
div > p{
  font-size: 2em;
}
p{
  font-size: 2rem;
}
label{
  font-size: 10vw;
}

Il paragrafo contenuto nel div avrà un font-size finale equivalente a 2 volte il font-size definito nel div. Il secondo paragrafo avrà una grandezza finale di 40px: 2 volte la dimensione definita nell’elemento. La label sarà pari al 10% della larghezza della finestra, modificando le dimensioni del browser vedremo infatti l’altezza del carattere variare coerentemente.


Oltre alle dimensioni di un oggetto bisogna sempre ricordare che è necessario controllarne il posizionamento rispetto al contenitore (detto anche parent)

la documentazione ufficiale espone tute le possiblità di posizionamento:

  • static: il valore di default che posiziona gli elementi in sequenza con il “normal flow”. Non è possibile modificare la posizione nemmeno con l’uso di top, left, right e bottom.
  • relative: l’oggetto viene posizionato rispetto se fosse statico con in aggiunta un offset basato sui valori di top, left, right e bottom.
  • absolute: l’oggetto viene posizionato rispetto al contenitore con un offset basato su top, left, right e bottom ma creando un layer aggiuntivo gestibile con la proprietà z-index
  • fixed: come il precedente ma ignora fratelli con la stessa proprietà (figli dello stesso genitore)
  • sticky: tecnica descritta nell’articolo “Come gestire il posizionamento con sticky e float”

Un altra proprietà molto interessante e importante con le recenti versioni di CSS è inset che permette di creare oggetti posizionati non linearmnete senza l’uso di top, left, right e bottom e evitano l’abuso dei margini, in particolare è possibile creare oggetti annidati con pochissime proprietà, si rimanda alla documentazione ufficiale per maggiori dettagli.


Volendo combinare queste tecniche per creare un footer di una pagina, impostando un elemento figlio del tag body con la proprietà fixed e impostando il valore di bottom a zero così da posizionare l’elemento in fondo alla pagina, la documentazione ufficiale presenta un bellissimo esempio dove il footer non è fluttuante (cioè non ha un float impostato):

<style>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}
</style>
...
<div class="footer">
  <p>Footer</p>
</div>
MENU