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
Creare form tipizzati con Angular
Cambiare la chiave di partizionamento di Azure Cosmos DB
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Eseguire attività con Azure Container Jobs
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Eseguire attività basate su eventi con Azure Container Jobs
Utilizzare database e servizi con gli add-on di Container App
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
C# 12: Cosa c'è di nuovo e interessante
Load test di ASP.NET Core con k6