Download - Box Model
![Page 1: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/1.jpg)
CSS BOX MODEL
Il modello box cssLezione di gennaio 2009Modulo HtmlCss
![Page 2: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/2.jpg)
Immagine del Box model
![Page 3: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/3.jpg)
Struttura del box model
![Page 4: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/4.jpg)
Box model - terminologia
![Page 5: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/5.jpg)
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!
![Page 6: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/6.jpg)
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.
![Page 7: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/7.jpg)
BorderAn element's border surrounds the padding.
It is a line around the content and provides a "visual separation between" elements.
![Page 8: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/8.jpg)
MarginA margin gives space between an element
and other elements in a web page. Like the padding, a margin is transparent.
![Page 9: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/9.jpg)
Esempio di uso del Box Model
![Page 10: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/10.jpg)
Stile del bordo del Box Model
![Page 11: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/11.jpg)
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
![Page 12: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/12.jpg)
Esempio: menù di link
![Page 13: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/13.jpg)
Menù di link con block stile
![Page 14: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/14.jpg)
Stile al menù di link -1
![Page 15: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/15.jpg)
Stile al menù di link -2
![Page 16: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/16.jpg)
Stile al menù di link -3
![Page 17: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/17.jpg)
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
![Page 18: Box Model](https://reader035.vdocument.in/reader035/viewer/2022081404/5596001c1a28ab96308b473b/html5/thumbnails/18.jpg)
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>