`Unități de măsură în CSS (px, %, em, rem, ch, vw)` în CSS

Funcții și unități CSS CSS1+ (rem, ch, vw, vh: CSS3+; lh: Chrome 109, Firefox 120, Safari 16.4)

Ghid al unităților CSS: absolute (px) și relative (%, em, rem, ch, lh, vw, vh, fr, cqi) și când să o folosești pe fiecare.

Sintaxă CSS

font-size: 1rem;      /* relativ la fontul rădăcinii */
padding: 0.5em;       /* relativ la fontul elementului */
width: 50%;           /* relativ la părinte */
max-width: 65ch;      /* aprox. 65 de caractere */
height: 100dvh;       /* înălțimea ferestrei */
border: 1px solid;    /* pixel CSS */

Ce face `Unități de măsură în CSS (px, %, em, rem, ch, vw)`

Unitățile absolute au o mărime fixă. Pe ecran se folosește aproape doar px (pixelul CSS, care nu este neapărat un pixel fizic: pe ecranele dense un px CSS ocupă 2 sau 3 pixeli fizici). Unitățile cm, mm, in, pt au sens mai ales la tipărire (1in = 96px).

Unitățile relative depind de altceva:
• %: de o mărime a părintelui (lățimea, la width și padding).
• em: de mărimea fontului elementului curent; rem: de mărimea fontului elementului rădăcină (<html>), de regulă 16px.
• ch: lățimea cifrei „0” din fontul curent; ex: înălțimea literei „x”.
• lh / rlh: înălțimea rândului elementului / a rădăcinii.
• vw, vh, dvh: procente din fereastra browserului; cqi, cqw: procente dintr-un container.
• fr: o fracțiune din spațiul liber al unei grile (doar în CSS Grid).

Regulă practică: rem pentru fonturi și spațieri (respectă mărimea de font aleasă de utilizator în browser), em pentru spațieri care trebuie să crească odată cu textul unui buton, % sau fr pentru coloane, ch pentru lățimea unui text de citit, px pentru borduri și umbre fine.

Valori uzuale

Valoare	Descriere
`px`	Pixel CSS; mărime fixă, potrivită pentru borduri și detalii fine.
`%`	Procent dintr-o mărime a părintelui (sau a fontului, la font-size).
`em / rem`	Multiplu al fontului elementului curent / al fontului rădăcinii.
`ch / ex`	Lățimea cifrei 0 / înălțimea literei x din fontul curent.
`lh / rlh`	Înălțimea rândului elementului / a rădăcinii.
`vw, vh, dvh, cqi, fr`	Relative la fereastră, la container sau la spațiul liber din grilă.

Exemple

Exemplul 1: Buton care crește proporțional cu textul lui

Padding-ul în em se scalează automat când schimbi doar font-size.

.buton {
  font-size: 1rem;
  padding: 0.6em 1.2em;
  border: 1px solid #1d4ed8;
  border-radius: 0.4em;
}

.buton.mare {
  font-size: 1.25rem;
}

Efect vizual în browser

Butonul obișnuit „Adaugă în coș” are text de 16px și padding de 9.6px × 19.2px. Varianta .mare are text de 20px, iar padding-ul și colțurile cresc automat la 12px × 24px, fără să le mai scrii o dată. Bordura rămâne subțire, de 1px.

Exemplul 2: Text de articol cu lățime ușor de citit

Un rând de 60–75 de caractere este confortabil la citit; ch exprimă direct această lungime.

.articol {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.125rem;
  line-height: 1.6;
}

.articol p + p {
  margin-top: 1lh;
}