HTML.it - Guida CSS di base - Impostare la larghezza

width espressa in pixel

Questo box ha una larghezza impostata con i pixel.

.box-1 {
 width: 400px;
 height: 200px;
 padding: 10px;
 border: 1px solid #002c53;
 background: #568ec0;
}

width espressa in percentuale

Le misure in percentuale sono sempre definite rispetto a quelle dell'elemento contenitore.

Questo box ha una larghezza pari al 40%. Si trova in un box con larghezza di 400px. Sarà dunque largo 160px.

.box-2 {
 width: 400px;
 height: 400px;
 padding: 10px;
 border: 5px solid #002c53;
 background: #568ec0;
}
.box-3 {
 width: 40%;
 height: 200px;
 padding: 10px;
 border: 1px solid #002c53;
 background: #568ec0;
}

width espressa in percentuale/2

Ancora un esempio di larghezza espressa in percentuale. Questa volta rispetto al div contenitore degli esempi che non ha una larghezza fissa. Avendo usato il valore 50%, la larghezza del box pari alla met del suo contenitore. Provate a restringere la finestra del browser per verificare come le due larghezza rimangano sempre proporzionali.

.box-4 {
 width: 50%;
 height: 200px;
 padding: 10px;
 border: 1px solid #002c53;
 background: #568ec0;
}

Usare il valore auto

Se si usa il valore auto, la larghezza dell'elemento sar uguale all'area del contenuto dell'elemento contenitore.

.box-5 {
 width: auto;
 height: 200px;
 padding: 10px;
 border: 1px solid #002c53;
 background: #568ec0;
}