Download - Box Model
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>