[CSS] Il box model

Per le dimensioni di un elemento html di tipo block occorre aver riguardo alla sua struttura, come rappresentata nella seguente immagine (tratta da mrwebmaster.it):

Le dimensioni complessive dell’elemento è quindi la somma dei seguenti addendi: larghezza area contenuti, padding, border e margin, che nell’esempio qui sotto è pari ad un quadrato di lato pari a (300+20+20+10+10+50+50=) 460 pixel.

<style>
.boxmodel {
  width: 300px;
  height: 300px;
  padding: 20px;
  border: 10px solid black;
  margin: 50px;    
}
</style>
<div class="boxmodel">Elemento hmtml</div>