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
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Eseguire attività pianificate con Azure Container Jobs
Load test di ASP.NET Core con k6
Creare form tipizzati con Angular
Cache policy su route groups di Minimal API in ASP.NET Core 7
Sfruttare al massimo i topic space di Event Grid MQTT
Eseguire una GroupBy per entity in Entity Framework
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet
Miglioramenti nell'accessibilità con Angular CDK