۝ OraWeb.it ۝ Unità di lunghezza CSS

Le unità di lunghezza in CSS

Unità di lunghezza in CSS

Le unità di lunghezza in CSS servono a definire dimensioni come larghezze, altezze, margini, padding, font-size e molto altro. Esistono unità assolute, che hanno un valore fisso (come pixel o centimetri), e unità relative, che si adattano al contesto (come percentuali o em). La scelta dell’unità influisce sulla flessibilità e sulla responsività del layout.

HOSTING • VPS • DEDICATED SERVER • HOUSING • SSL • PEC • CLOUD • DOMAIN

Approfondimenti

Quando usare le unità assolute: in casi in cui serve una misura precisa e costante, ad esempio nella stampa o in elementi che non devono adattarsi (es. px, cm, in).
Quando usare le unità relative: quando si vuole che la dimensione si adatti al contesto, come la dimensione del testo del genitore (em, rem) o della finestra del browser (vh, vw).
Unità relative al font: em e rem sono ideali per dimensioni accessibili e scalabili; em è relativa al font-size dell’elemento padre, rem alla radice (html).
Unità relative alla viewport: vw, vh, vmin e vmax permettono di adattare layout e sezioni a seconda delle dimensioni dello schermo.
Percentuali: utili per layout fluidi, le percentuali si riferiscono di solito al contenitore padre. Sono usate spesso con larghezze, padding o margin.

Una corretta scelta delle unità di misura è fondamentale per realizzare layout responsive, accessibili e adattabili a diversi dispositivi. L’uso combinato di unità assolute e relative consente di bilanciare precisione e flessibilità.

✅ Tabella Unità di lunghezza

Nota:
Le unità di lunghezza in CSS servono a definire dimensioni di elementi. Alcune sono assolute, altre relative al contesto.

Unità	Tipo	Descrizione
`px`	Assoluta	Pixel. L’unità più comune, fissa sullo schermo.
`em`	Relativa	Relativa alla dimensione del font dell’elemento padre.
`rem`	Relativa	Relativa alla dimensione del font del `<html>`.
`%`	Relativa	Percentuale rispetto all’elemento contenitore.
`vw`	Relativa	1% della larghezza della viewport (finestra del browser).
`vh`	Relativa	1% dell’altezza della viewport.
`vmin`	Relativa	1% del lato minore della viewport.
`vmax`	Relativa	1% del lato maggiore della viewport.
`cm`	Assoluta	Centimetri. Usato più per la stampa.
`mm`	Assoluta	Millimetri.
`in`	Assoluta	Pollici (1in = 2.54cm).
`pt`	Assoluta	Punti tipografici (1pt = 1/72 di pollice).
`pc`	Assoluta	Pica (1pc = 12pt).

Esempi pratici

Codice Esempio: Unità di lunghezza

CODE: CSS preleva codice

```
/* Larghezza fissa in pixel */
```
```
.box {
```
```
  width: 300px;
```
```
}
```
```
 
```
```
/* Font scalabile con rem */
```
```
body {
```
```
  font-size: 1rem; /* di solito 16px */
```
```
}
```
```
h1 {
```
```
  font-size: 2.5rem;
```
```
}
```
```
 
```
```
/* Altezza relativa alla finestra */
```
```
header {
```
```
  height: 20vh;
```
```
}
```
```
 
```

/* Larghezza in percentuale del contenitore */

```
.container {
```
```
  width: 80%;
```
```
  margin: 0 auto;
```
```
}
```
```
 
```

/* Padding relativo alla dimensione del testo */

```
.card {
```
```
  padding: 2em;
```
```
}
```

Le unità di lunghezza in CSS

Unità di lunghezza in CSS

Approfondimenti

✅ Tabella Unità di lunghezza

Esempi pratici

Follow us

Quick Links

Information

Contact Information