Tutti gli elementi HTML all'interno del DOM possono essere considerate "scatole" (box), ovvero dei rettangoli, posizionate e visualizzate all'interno della pagine in base a determinate proprietà (posizionamento, floating, dimensioni, ecc.).
Il termine "box model" di CSS si riferisce alla generazione di un insieme di rettangoli da parte del browser per determinare il layout complessivo di un elemento. Possiamo immaginare questa struttura come una serie di scatole contenuta l'una nell'altra, come i pezzi di una matrioska.
L'ordine di contenimento, a partire dall'elemento più interno fino a quello più esterno (dalla scatola più piccola fino alla più grande nella metafora del box model) è il seguente:
- content: il contenuto vero e proprio (ad esempio il testo) dell'elemento;
- padding: la spaziatura tra i bordi e il contenuto;
- border: il bordo dell'elemento;
- margin: la spaziatura tra l'elemento e gli elementi circostanti.
Lo spazio totale occupato dall'elemento all'interno della pagina è determinato dalla somma di questi singoli valori.
L'altezza complessiva è calcolata come: margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom.
La larghezza complessiva è calcolata come: margin-left + border-left-with + padding-left + width + padding-right + border-right-width + margin-right.
Il box model di CSS3 è descritto nella relativa specifica disponibile sul sito del W3C all'indirizzo http://www.w3.org/TR/css3-box/
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Rendere i propri workflow e le GitHub Action utilizzate più sicure
Introduzione ai web component HTML
Generare velocemente pagine CRUD in Blazor con QuickGrid
Gestione dei nomi con le regole @layer in CSS
Recuperare le subissue e il loro stato di completamento in GitHub
Creare una libreria CSS universale: Clip-path
Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
Combinare Container Queries e Media Queries
Utilizzare Container Queries nominali
Eseguire script pre e post esecuzione di un workflow di GitHub
Loggare le query più lente con Entity Framework
Migliorare l'organizzazione delle risorse con Azure Policy