Impaginare con i box model.

I box model sono degli elementi di layout che servono a posizionare i contenuti delle pagine web. Pensiamo a delle scatole in cui dentro sistemiamo i nostri contenuti (testi, immagini....). Possono avere forma quadrata o rettangolare, possono avere bordi e margini, presentano una larghezza e un'altezza. Di solito viene usato il tag <div> per disegnare un contenitore che verrà formattato con i css facendolo diventare un box model a tutti gli effetti.

Gli attributi del box model sono:
  • width: la larghezza
  • height: l'altezza
  • border: il bordo
  • padding: il margine interno
  • margin: il margine esterno

immagine box model
Da notare che il padding è a tutti gli effetti una misura e quindi si sommerà alla larghezza e all'altezza. Se ad un box diamo 300px di larghezza, 200px di altezza e un padding di 10px, il risultato visivo sarà essere un box di larghezza 320px e di altezza 220px. (300+10+10=320) (200+10+10=220)

Disegnamo un primo box model con un fondo giallo e il bordo blu.

Codice:

.box1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
        border: 1px solid #0000ff;
        width:300px;
        padding:40px;
        background-color:#ffff99;
} 
<div class="box1">box 1> (larghezza 300px, padding 40px)

Risultato:
immagine box model

Adesso disegnamo il secondo box model mettendo un margine al lato superiore in modo che si discosti dal primo box. Questo box lo facciamo con il fondo verde e il bordo rosso.

Codice:

.box2 {
        font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	border: 1px solid #ff0000;
	margin-top:50px;
	padding:20px;
	width:400px;
	background-color:#66ff99;
} 
<div class="box2">box2</div>  (larghezza 400px, padding 20px, margin-top 50px )

Risultato:
immagine box model

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *