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
Utilizzare Container Queries nominali
Creare una libreria CSS universale: Cards
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Utilizzare Intersect e Except per filtrare set di dati in TSql
Rendere i propri workflow e le GitHub Action utilizzate più sicure
Gestire progetti NPM in .NET Aspire
Introduzione alle Container Queries
Loggare le query più lente con Entity Framework
Scrivere selettori CSS più semplici ed efficienti con :is()
Rendere le variabili read-only in una pipeline di Azure DevOps
Testare il failover sulle region in Azure Storage
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API