Propiedad tab-size de CSS
La propiedad tab-size se utiliza para establecer el ancho del carácter de tabulación (U+0009) que se muestra en la página.
La propiedad tab-size es una de las propiedades de CSS3. Es visible en cualquier elemento donde se preserve el espacio en blanco (por ejemplo, usando white-space: pre, pre-wrap o pre-line), como <textarea> y <pre>.
INFO
Los valores negativos no son válidos.
| Valor inicial | 8 |
|---|---|
| Se aplica a | Todos los elementos, pero solo afecta a contenedores de bloque y elementos con espacios en blanco preservados. |
| Heredable | Sí. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.tabSize = "20"; |
Sintaxis
Sintaxis de CSS tab-size
css
tab-size: number | length | initial | inherit;Ejemplo de la propiedad tab-size:
Ejemplo de código CSS tab-size
html
<!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>Resultado
En el ejemplo dado, el tab-size del primer elemento es 5, y el del segundo elemento es 20.
Valores
| Valor | Descripción | Probar |
|---|---|---|
| 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. | Probar » |
| length | Establece el ancho de la tabulación. Los valores negativos no son válidos. Este valor es ampliamente compatible 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?