Per la definizione delle dimensioni di un elemento (width, height, ecc.), delle spaziature (margin, padding, ecc.), dei bordi, della grandezza del testo e, più in generale, per tutte le proprietà che richiedano una lunghezza, possiamo specificare il valore desiderato usando diverse unità di misura.
Le unità di misura possono essere distinte in relative (per esempio se riferita ad un valore precedentemente espresso o di un altro elemento) e assolute (ad esempio nel caso di una lunghezza espressa in centimetri).
Unità di misura relative
- %: rispetto alle dimensioni dell'elemento contenitore (parent)
- em: rispetto alle dimensioni del font dell'elemento
- ex: rispetto a x-height, ovvero all'altezza delle lettere minuscole
- rem: rispetto alla dimensione del font dell'elemento principale (root)
- vw: rispetto alla larghezza dell'area di visualizzazione (viewport); la larghezza totale è pari a 100vw
- vh: rispetto all'altezza dell'area di visualizzazione (viewport); l'altezza totale è pari a 100vh
- vm: rispetto al valore più piccolo tra altezza e larghezza dell'area di visualizzazione
- ch: rispetto alla larghezza del carattere "0"
Unità di misura assolute
- cm: misura in centimetri
- mm: misura in millimetri
- in: inches (pollici); 1in = 2,54cm
- px: pixels; 1px = 1/96in
- pt: points; 1pt = 1/72in
- pc: picas; 1pc = 12pt
Una nota particolare riguarda il caso delle misure espresse in pixel. L'ultima specifica del W3C definisce infatti px come unità assoluta, fissandone il valore in base alla risoluzione standard di 96 dpi ma solo per preservare la retrocompatibilità; in realtà pixel dovrebbe essere considerata un'unità relativa in quanto dipende dalle caratteristiche fisiche dello schermo.
Maggiori informazioni sulle unità di misura di lunghezza in CSS3 sono disponibili all'indirizzo: http://www.w3.org/TR/css3-values/#lengths.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Ottimizzazione dei block template in Angular 17
Referenziare un @layer più alto in CSS
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Creare una libreria CSS universale: Clip-path
Eseguire i worklow di GitHub su runner potenziati
Usare il colore CSS per migliorare lo stile della pagina
Utilizzare QuickGrid di Blazor con Entity Framework
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Creazione di componenti personalizzati in React.js con Tailwind CSS
I più letti di oggi
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy