Nello script precedente abbiamo visto come il Box Model di CSS contempli nel calcolo delle dimensioni complessive di un elemento, oltre alla larghezza e all'altezza del contenuto (width e height) anche la distanza dai bordi (padding) e lo spessore degli stessi (border-width).
In alcuni casi questo comportamento può rendere complesso il corretto dimensionamento degli elementi, come ad esempio nella costruzione di layout "liquidi" a colonne (elementi con dimensioni espresse in percentuale e affiancati mediante floating).
Impostando la proprietà "box-sizing" a "border-box" possiamo però indicare al browser di includere nel calcolo di width e height anche padding e bordi; questa modalità è anche nota come "IE Box Model" in quanto usata da Internet Explorer in modalità quirks.
In pratica possiamo dunque controllare il Box Model di un elemento attraverso il CSS stesso nel seguente modo:
- con box-sizing: content-box l'altezza e la larghezza specificate per un elemento (e i corrispondenti valori massimi e minimi) sono applicati al contenuto; i bordi e la spaziatura dai bordi vengono aggiunti esternamente al contenuto; questo è il comportamento predefinito di CSS2.1;
- con box-sizing: border-box l'altezza e la larghezza specificate per un elemento determinano la dimensione dello stesso fino ai bordi; la grandezza effettiva del contenuto dell'elemento è dunque data dalle dimensioni (width e height) impostate ma sottraendo bordi e padding.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Scrivere selettori CSS più semplici ed efficienti con :is()
Autenticazione di git tramite Microsoft Entra ID in Azure DevOps
Managed deployment strategy in Azure DevOps
Simulare Azure Cosmos DB in locale con Docker
Ridurre il reflow ottimizzando il CSS
Fornire parametri ad un Web component HTML
Gestione dell'annidamento delle regole dei layer in CSS
Referenziare un @layer più alto in CSS
Creare una libreria CSS universale: Cards
Creare una libreria CSS universale: Clip-path
Supportare la crittografia di ASP.NET Core con Azure Container App
Utilizzare l nesting nativo dei CSS
I più letti di oggi
- Impersonation di utente per l'esecuzione di codice in una pagina ASP.NET
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi