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
Gestire gli accessi con Token su Azure Container Registry
Creare una libreria CSS universale: Clip-path
Bloccare l'esecuzione di un pod in mancanza di un'artifact attestation di GitHub
Escludere alcuni file da GitHub Secret Scanning
Miglioramenti nelle performance di Angular 16
Assegnare un valore di default a un parametro di una lambda in C#
Creare una libreria CSS universale: i bottoni
Ordinare randomicamente una lista in C#
Supportare la sessione affinity di Azure App Service con Application Gateway
Implementare l'infinite scroll con QuickGrid in Blazor Server
Collegare applicazioni server e client con .NET Aspire
Gestione degli stili CSS con le regole @layer