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
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Utilizzare i primary constructor di C# per inizializzare le proprietà
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Creare un'applicazione React e configurare Tailwind CSS
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Creazione di componenti personalizzati in React.js con Tailwind CSS
Eseguire una query su SQL Azure tramite un workflow di GitHub
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Eseguire operazioni sui blob con Azure Storage Actions
Eseguire le GitHub Actions offline
Miglioramenti nelle performance di Angular 16