Comprendere il Box Model in Modo Pratico
Scorri per mostrare il menu
Gli elementi HTML vengono visualizzati come riquadri rettangolari su una pagina web. Ogni elemento possiede un'area di contenuto, padding, bordo e margine.
Le quattro parti del Box Model
Contenuto
L'area di contenuto contiene testo, immagini o altri elementi. Questa è la parte interna visibile dell'elemento.
Padding
Il padding è lo spazio tra il contenuto e il bordo. Crea uno spazio interno.
.box {
padding: 20px;
}
Il padding aumenta la dimensione visibile dell'elemento.
Bordo
Il bordo circonda il padding e il contenuto.
.box {
border: 4px solid darkblue;
}
Per impostazione predefinita, la larghezza del bordo è 0 e il colore del bordo corrisponde al colore del testo se non specificato.
Margine
Il margine è lo spazio all'esterno del bordo. Crea distanza tra gli elementi.
.box {
margin: 40px;
}
Il margine non influisce sul colore di sfondo dell'elemento.
index.html
styles.css
In questo esempio:
- Lo sfondo riempie l'area del contenuto e del padding;
- Il bordo li circonda;
- Il margine crea spazio all'esterno del box.
Per impostazione predefinita, alcuni elementi hanno proprietà di padding e margin predefinite. Questo è stato fatto per garantire che una pagina web sia leggibile anche senza alcuno stile.
Il modello a scatola determina quanto spazio occupa un elemento in una pagina.
La dimensione totale di un elemento dipende dalla dimensione del contenuto, dal padding, dal bordo e dal margine.
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
