Corso di CSS - Tutorial 8: Box model

📽️ Video tutorial consigliati

💻 #CSS - #Tutorial 8: #boxmodel

In questo settimo tutorial del corso di CSS (in italiano) parleremo di Box Model.

Impareremo come questo modello influisce sul layout di un sito web e come calcolare correttamente le dimensioni degli elementi considerando contenuto, padding, e bordi.

🟦 Le componenti del Box Model 🟦

🔵 Contenuto (Content)
Il contenuto di un elemento è la parte interna del box e include testi, immagini o altri elementi. La dimensione del contenuto può essere regolata attraverso le proprietà width e height

🔵 Padding
Il padding è lo spazio trasparente tra il contenuto del box e il suo bordo.
Può essere controllato tramite la proprietà padding

🔵 Bordo (Border)
Il bordo circonda il padding e può essere personalizzato in termini di stile, larghezza e colore attraverso la proprietà border

🔵 Margine (Margin)
Il margine rappresenta lo spazio esterno al bordo dell'elemento e influisce sulla distanza tra un elemento e gli altri elementi circostanti. Può essere controllato tramite la proprietà margin.

Alla luce di quanto detto finora, è chiaro che quando si impostano le proprietà width e height di un elemento, si impostano semplicemente la larghezza e l'altezza dell'area del contenuto.
Infatti, la larghezza totale effettiva di un elemento dovrebbe essere calcolata in questo modo:

▶ Larghezza effettiva dell'elemento = larghezza del contenuto + padding sinistro + padding destro + bordo sinistro + bordo destro

analogamente l'altezza totale effettiva di un elemento dovrebbe essere calcolata in questo modo:

▶ Altezza effettiva dell'elemento = altezza del contenuto + padding superiore + padding inferiore + bordo superiore + bordo inferiore

NB: il margine non è incluso nella dimensione effettiva del box. Le dimensioni effettive del box si fermano al bordo.

Se invece ci si riferisce alla larghezza/altezza totale di un elemento allora bisognerà includere anche i margini.

Seguite passo dopo passo il tutorial per evitare errori comuni e ottenere un design impeccabile!

Buona visione

💼 Ing. Francesca Martorana

[sordaenrico]

Interessante, un pò meno per me, cmq auguri per la giornata odierna.😘

[frasito]

ciao francesca, sono alle primissime armi, ho scelto che un'immagine mi riempia la prima pagina di un sito, ma l'immagine non si vede bene sul cell, cioè la pagina non è responsive, lavoro con wordpress tema enfold non so dove inserire la proprietà width 100% nel file css dell'immagine, mi puoi aiutare?