CSS  »  Guide  »  Guida CSS di base 

Se volete usare i CSS per scopi che vadano oltre la semplice gestione di sfondo e testo dovete avere ben chiaro il meccanismo che governa la presentazione dei vari elementi di una pagina. Torniamo per un attimo alla prima lezione. Abbiamo lì mostrato che una pagina (X)HTML non è altro che un insieme di box rettangolari, che si tratti di elementi blocco o di elementi inline non fa differenza. Tutto l'insieme di regole che gestisce l'aspetto visuale degli elementi blocco viene in genere riferito al cosiddetto box model.

Ogni box comprende un certo numero di componenti di base, ciascuno modificabile con proprietà dei CSS. La figura qui sotto mostra visivamente tali componenti:

Partendo dall'interno abbiamo:

• l'area del contenuto. È la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà width. Quelle verticali con height.
• il padding. È uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento. Come si vede dalla figura, se si imposta un colore di sfondo per un elemento questo si estende dall'area del contenuto alla zona di padding.
• il bordo. È una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.
• il margine. È uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.

Attenzione. Queste cose non sono state introdotte con i CSS, ma fanno parte del normale meccanismo di rendering di un documento. Quando realizziamo una pagina (X)HTML senza fogli di stile è il browser ad applicare per alcune di queste proprietà le sue impostazioni predefinite. Per esempio, introdurrà un certo margine tra un titolo e un paragrafo o tra due paragrafi. La novità è che con i CSS possiamo controllare con precisione al pixel tutti questi aspetti.

Il box model è governato da una serie di regole di base concernenti la definizione di un box e il suo rapporto con gli altri elementi.

1. Larghezza del box

Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva di un box . La prima è data dal valore della proprietà width. La seconda è data da questa somma:

Come si vede infatti nella figura margini, padding e bordi devono considerarsi a tutti gli effetti parte dell'area complessiva dell'elemento. L'esempio chiarisce anche visivamente questo aspetto (attenzione: se visualizzate questa pagina con Explorer 5/5.5 su Windows non vedrete la cosa giusta. Questo browser interpreta male il concetto di larghezza. Per chiarimenti e soluzioni si veda la lezione dedicata alla proprietà width).

2. Larghezza ed elemento contenitore

Se non si imposta alcun valore per la proprietà width o se il valore usato è auto la larghezza di un box è uguale a quella dell'area del contenuto dell'elemento contenitore. Quest'ultimo è l'elemento che racchiude il box. Esempio.

3. Uso del valore auto

Solo per tre proprietà è possibile impostare il valore auto: margini, altezza e larghezza (width). L'effetto è quello di lasciar calcolare al browser l'ammontare di ciascuna di esse in base alla risoluzione dello schermo e alle dimensioni della finestra.

Solo i margini possono avere valori negativi. Ciò non è consentito per padding, bordi, altezza e larghezza.

4. Margini verticali e orizzontali tra gli elementi

Per due box adiacenti in senso verticale che abbiano impostato un margine inferiore e uno superiore la distanza non sarà data dalla somma delle due distanze. A prevalere sarà invece la distanza maggiore tra le due. È il meccansimo del cosiddetto margin collapsing. Tale meccanismo non si applica ai box adiacenti in senso orizzontale. Esempio.

Ulteriori approfondimenti su questi argomentii li troverete nelle prossime lezioni, quando affronteremo l'analisi delle singole proprietà. Qui aggiungiamo che regole particolari su alcuni degli aspetti trattati si applicano agli elementi posizionati. Ne parleremo in una lezione specifica.

Links

Il box-model secondo il W3C: complesso e un pò intricato.

Il box-model, teoria e pratica: ottimo tutorial sul sito WebReference.com. Lettura vivamente consigliata.

Altri articoli

Altre guide

Altre newsletter