CSS: Box Model

Una pagina XHTML è composta da elementi in blocco e elementi in linea. Il BOX MODEL è l'insieme delle istruzioni che descrivono la struttura di una pagina costituita da elementi in blocco.

box-model

Nell'area del contenuto si trovano le immagini, il testo e tutto quello che rappresenta il contenuto vero e proprio;

Il padding è lo spazio tra il contenuto e il bordo del blocco.

Il bordo  delimita il blocco e ne può essere variato il colore, lo spessore e lo stile.

Il margine è lo spazio variabile che indica la distanza tra un elemento ed un altro.

Per calcolare la larghezza di un box bisogna tenere in considerazione le dimensioni del box (width), le dimendioni del padding, del border e del margin. Quindi se settiamo la larghezzza width, la larghezza complessiva del box sarà data dalla somma del suo valore e del valore degli altri attributi sopracitati:

  .box-1 {

	 width: 400px;

	 height: 400px;

	 padding: 10px;

	 border: 5px solid #002c53;

	 background: #ffffff;

  }

La proprietà box-sizing, introdotto nel CSS 3.0, è possibile inglobare nella dimensione di width tutte le altre misure:

   .box-2 {

	 -moz-box-sizing: border-box;

	 -webkit-box-sizing: border-box;

	 box-sizing: border-box;

	 width: 400px;

	 height: 400px;

	 padding: 10px;

	 border: 5px solid #002c53;

	 background: #ffffff;

    }

La larghezza del box può essere settata come auto oppure, se omessa, prenderà il valore del suo box contenitore:

	<div class="box-1">

	 <p>Area del contenuto [...]</code></p>

	  <div class="box-2">

	   <p>La larghezza di questo box [...].</p>

	  </div>

	</div>
   .box-1 {

	 width: 400px;

	 height: 400px;

	 border: 5px solid #002c53;

	 background: #568ec0;

	}

	.box-2 {

	 border: 5px solid #002c53;

	 background: #568ec0;

   }

Il margin collapsing è meccanismo che si applica ai box disposti in maniera verticale, dove non si somma il valore dei margini superiori ed inferiori, ma prevale la distanza maggiore tra i due.