Qué unidad elegir en CSS

Las unidades absolutas ignoran al lector; las relativas, no.

:root { font-size: 100%; }

.prose {
  font-size: 1.125rem;
  max-width: 68ch;
  line-height: 1.6;
  margin-block: 2rem;
}

.badge {
  font-size: 0.75rem;
  /* el padding en em queda proporcional a este tamaño de fuente */
  padding: 0.25em 0.6em;
  border-radius: 999px;
}

.hero {
  min-height: 60svh;
  padding-inline: max(1rem, 4vw);
}

Cómo funciona

1. rem es el tamaño de fuente de la raíz, así que escala con el ajuste del usuario.
2. em se compone: es el tamaño de fuente del propio elemento, y anida mal.
3. ch mide en caracteres, que es lo que de verdad quiere un largo de línea.

Palabras clave y builtins usados aquí

• ch
• em
• padding
• px
• rem
• vw

El intento, en números

Líneas

20

Caracteres a escribir

319

Tokens

74

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 59 segundos.

Escribe este fragmento

Paso 1 de 3 en Valores y unidades; paso 20 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →