BoxModel

Tutti gli elementi HTML possono essere considerati come delle caselle (Box), dunque nel CSS il termine "Box Model" viene utilizzato quando si parla del layout di una pagina.

Il Box Model è un rettangolo che avvolge ogni elemento HTML ed è composto da: margin, border, padding, e content.

Descrizione delle diverse parti:

• Content - il contenuto della cella in cui vengono visualizzati testo e immagini
• Padding - spazio che separa il contenuto dal bordo
• Border - bordo che delimita Content e Padding
• Margin - spazio che separa il bordo con il suo contenuto dagli elementi esterni al box

Esempio d'uso

		<style>
		.MyBox
		{
			background-color: #d0d0d0;
			width: 200px;
			border: 15px solid #4caf50;
			padding: 50px;
			margin: auto;
			margin-top: 20px;
		}
		</style>
		...
		<div class="MyBox">
		Questo è un esempio di testo racchiuso all'interno di in Box.
		</div>
	

Ecco i link ad una prima pagina di esempio sul Box Model

Esempio 1 Box      Esempio 1 Box su JSFiddle

Ecco i link ad una seconda pagina di esempio sul v

Esempio 2 Box      Esempio 2 Box su JSFiddle

Ecco i link ad una terza pagina di esempio sul v

Esempio 3 Box      Esempio 3 Box su JSFiddle