Propiedad CSS tab-size

La propiedad CSS tab-size controla el ancho con el que se renderiza un carácter de tabulación (U+0009). De forma predeterminada, el navegador dibuja cada tabulación como 8 espacios, lo que suele ser mucho más ancho de lo que se desea en listados de código. tab-size permite establecer ese ancho en un número determinado de anchos de espacio o en una longitud CSS exacta.

Esta página explica qué hace la propiedad, cuándo surte efecto, la diferencia entre los valores <number> y <length>, la compatibilidad con navegadores y un ejemplo ejecutable.

¿Cuándo importa tab-size?

Una tabulación solo cambia el diseño visual cuando el espacio en blanco circundante está preservado. En HTML normal, los navegadores colapsan tabulaciones, espacios y saltos de línea en un único espacio, por lo que tab-size no tiene efecto. Se vuelve relevante cuando el espacio en blanco se conserva, lo que ocurre en dos situaciones habituales:

Dentro de <pre> y <textarea>, que preservan el espacio en blanco de forma predeterminada.
En cualquier elemento donde se establezca white-space con el valor pre, pre-wrap o pre-line.

Por eso tab-size es la propiedad indicada cuando se muestra código fuente, tablas ASCII o cualquier contenido donde las columnas deben alinearse. La propiedad es una de las propiedades de CSS3 y es heredada, por lo que aplicarla a un contenedor también afecta al texto preformateado anidado.

Información

Los valores negativos no son válidos y la declaración se ignora. El valor debe ser un <number> no negativo o una <length> no negativa.

Valor inicial	8
Se aplica a	Todos los elementos, pero solo afecta a los contenedores de bloque y a los elementos con espacio en blanco preservado.
Heredada	Sí.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.tabSize = "20";

Sintaxis

tab-size: <number> | <length> | initial | inherit;

<number> — el número de anchos de espacio que ocupa una tabulación (p. ej., tab-size: 4). Es la forma más habitual. Es relativa a la fuente, por lo que la tabulación mantiene la proporción al cambiar el tamaño de fuente.
<length> — un ancho explícito como tab-size: 2em o tab-size: 20px. Útil cuando se necesita una tabulación fija e independiente de la fuente.

Un carácter de tabulación no siempre añade el espacio completo de tab-size. Al igual que una tabulación real, avanza el texto hasta la siguiente marca de tabulación, por lo que el espacio depende de cuántos caracteres ya preceden a la tabulación en esa línea.

Ejemplo de la propiedad tab-size

Ejemplo de código CSS tab-size

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .tab1 {
        tab-size: 5;
      }
      .tab2 {
        tab-size: 20;
      }
    </style>
  </head>
  <body>
    <h2>Tab-size property example</h2>
    <pre class="tab1">
        Lorem	ipsum	is	a...  
    </pre>
    <pre class="tab2">
        Lorem	ipsum	is	a...
    </pre>
  </body>
</html>

Pruébalo tú mismo »

Resultado

En el ejemplo, el tab-size del primer elemento es 5 y el del segundo elemento es 20.

Usar un valor de longitud

En lugar de un número de espacios, se puede indicar un ancho fijo. Aquí cada tabulación avanza hasta un límite de 2em independientemente del ancho del espacio de la fuente:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      pre {
        tab-size: 2em;
      }
    </style>
  </head>
  <body>
    <pre>Name	Role
Ann	Designer
Bob	Developer</pre>
  </body>
</html>

Como cada fila usa una tabulación después del nombre, la segunda columna queda alineada en la misma marca de tabulación de 2em.

Compatibilidad con navegadores

tab-size es compatible con todos los navegadores modernos. La forma <number> tiene el soporte más amplio; la forma <length> está soportada en las versiones actuales de Chrome, Edge, Firefox y Safari. Los navegadores más antiguos pueden necesitar los prefijos -moz-tab-size y -o-tab-size, pero estos ya no son necesarios para navegadores actualizados.

Valores

Valor	Descripción	Pruébalo
number	Establece el número de caracteres de espacio en una tabulación. Los valores negativos no son válidos. El valor predeterminado es 8.	Pruébalo »
length	Establece el ancho de la tabulación. Los valores negativos no son válidos. Este valor tiene amplia compatibilidad con los navegadores modernos.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad 'tab-size' en CSS?

Controla el ancho del carácter de tabulación.Determina el tamaño de una imagen.Establece el número de espacios al que equivale cada carácter de tabulación.Controla la altura del carácter de tabulación.