CSS BOX MODEL Il modello box css Lezione di gennaio 2009 Modulo 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!

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).

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.

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.

Border An element's border surrounds the padding. It is a line around the content and provides a "visual separation between" elements.

An element's border surrounds the padding. It is a line around the content and provides a "visual separation between" elements.

Margin A margin gives space between an element and other elements in a web page. Like the padding, a margin is transparent.

A 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

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

Supponiamo di avere il seguente codice html con un elemento paragrafo ed un immagine al suo interno che per default è inline

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

<p> This is a picture of Hexxa:

<img src=&quot;images/Hexxa.jpeg&quot; alt=&quot;Hexxa&quot; />I took this picture at the fair.

</p>