Impostare la larghezza con i CSS: la proprietà width

La definizione della larghezza, e più in generale la formattazione orizzontale degli elementi, è più problematica rispetto all'altezza e alla formattazione verticale. E prima di iniziare è utile richiamare i concetti di base visti nella lezione CSS dedicata al box model.

Bisogna distinguere tra tre concetti:

• la larghezza dell'area del contenuto;
• la larghezza complessiva;
• la larghezza dell'area visibile.

La prima è data dal valore della proprietà width.

La seconda corrisponde allo spazio occupato sulla pagina compresi i margini ed è data da questa somma:

margine sinistro + bordo sinistro + padding sinistro
+ area del contenuto
+ padding destro + bordo destro + margine destro

La terza corrisponde allo spazio occupato sulla pagina esclusi i margini, parliamo insomma della parte del box delimitata dai bordi e a cui si può applicare uno sfondo. È data da questa somma:

bordo sinistro + padding sinistro
+ area del contenuto
+ padding destro + bordo destro

La proprietà CSS width

Con la proprietà width, dunque, impostiamo la larghezza dell'area del contenuto di un box, esclusi padding e bordi.

Sintassi ed esempi

selettore: {width: valore;}

Il valore per width può corrispondere a:

• auto: valore iniziale e di default; se non si impostano margini, bordi e padding la larghezza dell'elemento sarà uguale all'area del contenuto dell'elemento contenitore;
• un valore numerico con unità di misura;
• un valore in percentuale: la larghezza sarà calcolata rispetto a quella dell'elemento contenitore.

La proprietà width non è ereditata.

div {width: auto;}
p {width: 90px;}
div.box {width: 50%;}

Esempi.

La proprietà CSS min-width

Imposta la larghezza minima di un elemento. Si applica a tutti gli elementi, tranne a quelli in linea non rimpiazzati e agli elementi di tabelle. Proprietà non ereditata.

Sintassi ed esempi

selettore {min-width: valore;}

I valori possono essere:

• un valore numerico con unità di misura;
• un valore in percentuale: la larghezza sarà come minimo quella espressa dalla percentuale riferita alla larghezza dell'elemento contenitore.

div {min-width: 400px;}
p {min-width: 40%;}

min-width può essere usata da sola o insieme alla proprietà width.

Se usata da sola, l'elemento a cui viene applicata non potrà assumere una larghezza inferiore al valore impostato, ma si estenderà orizzontalmente andando a coprire per intero la larghezza dell'elemento contenitore.

Se abbinata a width, bisogna innanzitutto badare a non usare per le due proprietà la stessa unità di misura: in questo caso prevale il valore espresso per width. Tipicamente, si usa definire una in px e l'altra in percentuale:

div {
width: 70%;
min-width: 400px;
}

Questa proprietà trova il suo scenario d'uso più comune nella realizzazione di layout fluidi, per esempio per impedire che una colonna del layout diventi troppo stretta quando si restringe la finestra del browser.

Esempi.

La proprietà CSS max-width

Imposta la larghezza massima di un elemento. Non è ereditata.

Sintassi ed esempi

selettore {max-width: valore;}

Per quanto riguarda i valori, essi possono essere rappresentati da:

• none: valore di default, non c'è un limite per larghezza dell'elemento;
• un valore numerico con unità di misura;
• un valore in percentuale.

div {max-width: 400px;}
p {max-width: 40%;}

Anche max-width è usata per lo più nell'ambito della costruzione dei layout. E anch'essa può essere usata da sola o abbinata a width. Gli effetti sono inversi a quelli prodotti da min-width. In questo caso l'elemento può assumere una larghezza inferiore rispetto al valore impostato ma non un valore superiore.

Esempi.