width
espressa in pixelQuesto 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 percentualeLe 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/2Ancora 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; }
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; }