Il modello CSS Box
Tutti gli elementi HTML possono essere considerati come scatole. In CSS, il termine "modello di dialogo" viene usato quando si parla di design e il layout.
Il box model è essenzialmente una scatola che avvolge ogni elemento HTML. Si compone di: margini, bordi, padding, e il contenuto effettivo.
L'immagine sottostante illustra il box model:
Spiegazione delle diverse parti:
- Contenuto - Il contenuto della scatola, dove compaiono testo e immagini
- Imbottitura - Cancella una zona attorno al contenuto.L'imbottitura è trasparente
- Border - Un bordo che va in giro per l'imbottitura e contenuti
- Margine - Cancella una zona al di fuori del confine.Il margine è trasparente
Il modello di dialogo consente di aggiungere un bordo intorno agli elementi, e per definire lo spazio tra gli elementi.
Esempio
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
} Prova tu stesso " Larghezza e altezza di un elemento
Al fine di impostare la larghezza e l'altezza di un elemento correttamente in tutti i browser, è necessario sapere come funziona il box model.
 | Importante: quando si impostano le proprietà width e height di un elemento con i CSS, è sufficiente impostare la larghezza e l'altezza dell'areadelcontenuto.Per calcolare la grandezza di un elemento, è necessario aggiungere anche padding, bordi e margini. |
|---|
Supponiamo che vogliamo per lo stile un <div> elemento di avere una larghezza totale di 350 pixel:
Ecco la matematica:
La larghezza totale di un elemento deve essere calcolato in questo modo:
Larghezza totale elemento = larghezza + padding sinistro + padding destra + bordo sinistro + margine destro + margine sinistro + margine destro
L'altezza totale di un elemento deve essere calcolato in questo modo:
Altezza totale elemento = altezza + padding superiore + padding inferiore + bordo superiore + margine inferiore + margine superiore + margine inferiore
| Nota per i vecchi IE: Internet Explorer 8 e versioni precedenti, includere imbottitura e di confine nella width proprietà. Per risolvere questo problema, aggiungere un <!DOCTYPE html> alla pagina HTML. |
|---|
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»