Playground de line-height en CSS

Explora line-height con controles para comparar normal, valores unitless, longitudes en rem y porcentajes sobre un bloque de texto real.

BaselineLab permite comparar line-height con texto real, lineas largas y un bloque suficientemente estrecho para ver como cambia el ritmo vertical. Prueba normal, numeros sin unidad, longitudes en rem y porcentajes antes de copiar el CSS.

HTML

<p class="line-height-sample">
  BaselineLab permite comparar line-height con texto real,
  lineas largas y un bloque suficientemente estrecho para ver como cambia el ritmo vertical.
  Prueba normal, numeros sin unidad, longitudes en rem y porcentajes antes de copiar el CSS.
</p>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<p class="max-w-xl text-lg leading-normal">
  BaselineLab permite comparar line-height con texto real,
  lineas largas y un bloque suficientemente estrecho para ver como cambia el ritmo vertical.
  Prueba normal, numeros sin unidad, longitudes en rem y porcentajes antes de copiar el CSS.
</p>

CSS

.line-height-sample {
  max-inline-size: 36rem;
  font-size: 1.125rem;
  line-height: 1.5;
}