width & height

Gli ultimi fattori che concorrono alle dimensioni di un contenitore sono larghezza (width) e altezza (height).

aside{
   width: 300px;
   height: 500px;
}

Le unità di misura che puoi utilizzare sono sempre le solite: px, % e em. Un piccolo appunto sulla percentuale e l’altezza: scrivere height:100%; non ha nessun senso, tranne che in 2 casi (che vedremo tra breve). Questo perché l’altezza di una pagina HTML non è definibile normalmente. Viceversa, scrivere width:100%; ha perfettamente senso, in quando la larghezza di un elemento dipende dalla larghezza del suo genitore.

Esistono due varianti a width e height: min-width & max-width e min-heigh & max-height. Il min- stà a significare che imposti una dimensione minima, sotto la quale non è possibile scendere; max- invece, significa che imposti una dimensione massima oltre la quale non è possibile andare.

aside{
   min-width: 150px;
   min-height: 250px;
   width: 300px;
   height: 500px;
}

Quanto fin qui visto ti dovrebbe aver chiarito meglio l’assunto di prima, ossia:

dimensione di un elemento = margin + padding + border

Ti faccio però un altro esempio: poniamo il caso che un DIV debba essere largo 500px, ma che abbia, a destra e a sinistra, un padding di 10px e dei bordi di 5px. Quale sarà la sua larghezza effettiva, quella che imposti con la proprietà width?
Semplice: seguendo l’assunto riportato più sopra:

500px = 20px (di padding, a destra ed a sinistra) + 10px (di border, a destra ed a sinistra) + 470px (di contenuto).

Puoi vederla anche da un altro punto di vista:

dimensioni di un elemento = 500px (di contenuto) - 20px (di padding, a destra ed a sinistra) - 10px (di border, a destra ed a sinistra)

Riscrivendola con CSS:

See the Pen oDJrc by Giovanni Buffa (@gioppy) on CodePen

Pillola di saggezza: come fare una figura rotonda con CSS? Semplice:

.round{
   width: 100px;
   height: 100px;
   border-radius: 50%;
}