Image not found

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.

Esempio 1 Box      Esempio 1 Box su JSFiddle

Esempio 2 Box      Esempio 2 Box su JSFiddle

Esempio 3 Box      Esempio 3 Box su JSFiddle

Torna all'indice