Per box intendo i “contenitori” che regolano la struttura del layout. Ad esempio il box dell’header, quello che contiene la colonna, o quello che contiene i post (se si parla di blog).
Siano essi tabelle o div, usano le stesse proprietà che vanno a definirne la forma definitiva che poi vediamo alias:
 

regola la larghezza del box. Solitamente è espresso in pixel (px), in ems (em) ed in percentuale %.

regola l’altezza del box. Anch’esso può essere espresso in pixel, ems ed in percentuale.

regola il margine di spazio esterno al box. Solitamente è espresso in pixel o in percentuale.

E’ possibile gestire indipendentemente il margine di ogni lato del box assegnando ad ogni lato il suo margin in questo modo:

• margin-top : stabilisce il margine esterno al lato superiore del box;
• margin-bottom : stabilisce il margine esterno al lato inferiore del box;
• margin-left : stabilisce il margine esterno al lato sinistro del box;
• margin-right : stabilisce il margine esterno al lato destro del box;

Qualora si sia deciso di dare a tutti e 4 i lati lo stesso margine basterà scrivere

• margin: n px;

(dove la n sta per il valore da voi scelto).

Il margin può anche avere il valore auto. Solitamente è adottato nel caso dei margini da assegnare al box principale del layout, ossia il container che ingloba tutto il contenuto del sito.
Ponendo queste due proprietà :

• margin-right: auto;
• margin-left: auto;

Il box si posizionerà automaticamente al centro dello schermo, qualsiasi sia la risoluzione adottata.

Ovviamente la proprietà margin può essere utilizzata anche su altri elementi quali il testo, immagini .. non solo al box ;)

Molto simile al margin, il padding invece regola il margine di spazio interno del box.
E’ utile utilizzarlo se si vuole evitare che il testo contenuto in un box vada ad appoggiarsi in modo anti estetico al bordo del box.

Anche qua è possibile gestire indipendentemente i valori dei 4 lati in questa maniera:

• padding-top : stabilisce il margine interno al lato superiore del box;
• padding-bottom : stabilisce il margine interno al lato inferiore del box;
• padding-left : stabilisce il margine interno al lato sinistro del box;
• padding-right : stabilisce il margine interno al lato destro del box;

Qualora si sia deciso di dare a tutti e 4 i lati lo stesso margine basterà scrivere

• padding: n px; (dove la n sta per il valore da voi scelto).

Ovviamente la proprietà padding può essere utilizzata anche su altri elementi quali il testo, immagini .. non solo al box ;)

Si può decidere di assegnare un bordo visibile o meno al nostro box.
Per farlo bisogna dichiarare la larghezza di questo bordo, il tipo di bordo che vogliamo e il colore.

• border: 1px solid #000000;

1px si referisce alla larghezza del bordo.
solid indica il tipo di bordo (in questo caso un tratto continuo)
#000000 indica il colore del bordo (in questo caso nero)

La larghezza la possiamo scegliere liberamente come preferiamo, 1, 4, 10 px … occhio però più grande lo facciamo più spazio occuperà il nostro box … a buon intenditor ;)

Possiamo scegliere il tipo di bordo fra 7 gentilmente concessi dal nostro CSS :

• solid : è una linea continua;
• dotted : a puntini (su firefox ha un effetto molto delicato..su explorer vengono fuori pallini veri e propri);
• ridge : in rilievo (occhio che con explorer questo effetto non viene visualizzato correttamente e perde il suo fascino);
• dashed : a trattini;
• outset : in rilievo verso l’esterno (da usare se dato a tutti e 4 i lati);
• inset : in rilievo verso l’interno (da usare se dato a tutti e 4 i lati);
• double : doppia linea (per essere visibile bisogna assegnare minimo 2-3 px di larghezza al bordo).

E’ possibile gestire indipendentemente il bordo di ogni lato del box assegnando ad ogni lato il suo bordo in questo modo:

• border-top : stabilisce il bordo del lato superiore del box;
• border-bottom : stabilisce il bordo del lato inferiore del box;
• border-left : stabilisce il bordo del lato sinistro del box;
• border-right : stabilisce il bordo del lato destro del box;

Qualora si sia deciso di dare a tutti e 4 i lati lo stesso bordo basterà scrivere

• border: n px [tipodibordo] #[colorescelto]; (dove la n sta per il valore da voi scelto).

Ovviamente il border può essere utilizzato anche per creare un bel effetto sui link, intorno ad un’immagine o ad un testo…sta a voi sbizzarrirvi ;)

« Back to Tutorials - L’abc del CSS