In una recente guida dedicata ai fogli di stile CSS abbiamo visto come la proprietà width possa essere utilizzata per definire in forma assoluta o relativa la larghezza di un elemento. Attraverso le proprietà min-width e max-width è possibile ottenere una una maggiore flessibilità nella gestione della larghezza; ciascuna di queste proprietà può essere usata autonomamente o in abbinamento con la proprietà width.
CSS, la proprietà min-width
La proprietà min-width permette di definire la larghezza minima di un elemento. Se ad esempio la proprietà width è stata definita in modo proporzionale, attraverso min-width è possibile evitare che la dimensione dell’elemento si riduca eccessivamente. Esattamente come per width, anche la propriatà min-width di CSS può assumere due tipologie di valori:
- dimensioni assolute espresse ad esempio in pixel (px) o in un’altra delle unità di misura riconosciute nei fogli di stile CSS (pt, cm, in, mm, pc, em, ex).
- dimensione percentuale rispetto all’elemento contenitore (ad es. 85%).
CSS, la proprietà max-width
La proprietà max-width è in un certo senso complementare alla precedente e permette di definire la larghezza massima di un elemento. Può essere utilizzata ad esempio per evitare che un blocco di testo assuma una larghezza eccessiva e scomoda da consultare quando viene visualizzato su uno schermo panoramico. Anche la proprietà max-width nei CSS può essere usata singolarmente o in abbinamento con width. Anche max-width può infine utilizzare dimensioni assolute o percentuali.
Nell’esempio che segue vediamo un semplice codice in cui la larghezza di un blocco </p> è gestita utilizzando sia la proprietà width che le proprietà min-width e max-width:
p {
width: auto;
min-width: 150px; /* larghezza minima */
max-width: 600px; /* larghezza massima */
}