Logo
Banner Informatica

Box Model

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.

Margin

Border

Padding

Content

Descrizione delle diverse parti:

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>
Questo è un esempio di testo racchiuso all'interno di in Box.

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

Torna all'indice