Width

Ecco una serie di esempi che mostrano il funzionamento di questa fondamentale proprietà che esprime la larghezza dell'area del contenuto di un elemento.

Width espressa in pixel

Caso semplice e standard.

Codice:

#div1 {
width: 200px;
background: Silver;
}

#div1

Width espressa in percentuale

La dimensione del div qui sotto dovrebbe essere uguale alla metà della finestra del browser.

Codice:

#div2 {
width: 50%;
background: Silver;
}

#div2

Width = auto

Se usiamo il valore auto la larghezza sarà automaticamente equivalente alla larghezza dell'elemento contenitore. In questo caso il div si estenderà orizzontalmente per tutta l'ampiezza della finestra. Noterete dei margini a sinistra e destra, ma sono quelli "naturali" che ogni browser inserisce.

Codice:

#div3 {
background: Silver;
width: auto;
}

#div1 width:auto;

Width in percentuale rispetto ad un elemento con larghezza in pixel

Qui mostriamo il concetto di larghezza relativa espressa in percentuale. Il div grigio è largo 600px. Il secondo ha la proprietà width impostata al 50%. Il risultato è che esso sarà di 300px.

Codice:

#div4 {
background: Silver;
width: 600px;
}

#div5 {
background: Teal;
width: 50%;
}

#div4 width:600px;
#div5 width: 50%;

Larghezza effettiva e width coincidenti

L'esempio mostra chiaramente come width e larghezza effettiva possano coincidere se non si impostano bordi, margini e padding.

Il primo div (#div11) presenta il codice seguente:

#div11 {
background: silver;
width: 300px;
}

La sua larghezza effettiva sarà di 300px.

Il secondo (#div12) ha invece queste impostazioni:

#div12 {
background: silver;
width: 200px;
border: 30px solid black;
padding: 20px;
}

La sua larghezza, secondo quanto abbiamo imparato, è data da questa somma:

30+20+200+20+30= 300px

Questo è il div #div11

  

Questo è il div #div12

 


Width = auto rispetto ad un elemento con larghezza in pixel

Ancora una dimostrazione di come auto imposti la larghezza sulla base di quella dell'elemento contenitore.

Codice:

#div6 {
background: teal;
width: auto;
}

#div4 {
background: Silver;
width: 600px;
}

#div4 width:600px;
#div6 width: auto;

Width = auto è uguale all'area del contenuto!

Per finire. Ecco la dimostrazione che width esprime sempre l'area del contenuto. Il div verde ha widht = auto, quello grigio width = 600px; esattamente come prima. Ma ora il div grigio ha anche un padding di 30px. La sua estensione complessiva è maggiore (660px), ma l'area del contenuto è sempre di 600px.

Codice:

#div7 {
background: Silver;
width: 600px;
padding: 30px;
}

#div8 {
background: Teal;
width: auto;
}

#div7 width:600px;
#div8 width: auto;