CSS BOX MODEL

Il modello box cssLezione di gennaio 2009Modulo HtmlCss

Immagine del Box model

Struttura del box model

Box model - terminologia

The Content Area The content area includes text or images and the

box the browser traces around that content (which is just big enough to fit the content).

NOTE: The dashed line above illustrates the content area box. A browser would not draw an actual line!

Padding Around the content area box, we can have optional

padding. Padding is transparent and we can use it to create "visual whitespace" between the content area and the border.

BorderAn element's border surrounds the padding.

It is a line around the content and provides a "visual separation between" elements.

MarginA margin gives space between an element

and other elements in a web page. Like the padding, a margin is transparent.

Esempio di uso del Box Model

Stile del bordo del Box Model

Inline e block element Ad ogni elemento è

assegnata la proprietà inline o block

Gli elementi inline si allineano orizzontalmente

Gli elementi block si dispongono l’uno sotto l’altro

Ad esempio, i paragrafi sono elementi block, mentre le singole parole sono inline perché si dispongono orizzontalmente in una riga

Esempio: menù di link

Menù di link con block stile

Stile al menù di link -1

Stile al menù di link -2

Stile al menù di link -3

Esempio con un immagine Supponiamo di avere il seguente codice html con un

elemento paragrafo ed un immagine al suo interno che per default è inline

Ciò significa che l’immagine si allineerà orizzontalmente con il testo del paragrafo

Creiamo una cornice attorno l’immagine <p> This is a picture of Hexxa: <img src="images/Hexxa.jpeg" alt="Hexxa" />I took this picture

at the fair. </p>