Propriedade CSS tab-size

A propriedade CSS tab-size controla a largura com que um caractere de tabulação (U+0009) é renderizado. Por padrão, o navegador exibe cada tabulação como 8 espaços, o que costuma ser muito mais largo do que o desejado em listagens de código. O tab-size permite definir essa largura como qualquer número de espaços ou como um comprimento CSS exato.

Esta página explica o que a propriedade faz, onde ela realmente surte efeito, a diferença entre os valores <number> e <length>, o suporte dos navegadores e um exemplo interativo.

Quando o tab-size é relevante?

Uma tabulação só altera o layout visível quando o espaço em branco ao redor está preservado. No HTML normal, os navegadores colapsam tabulações, espaços e quebras de linha em um único espaço, portanto o tab-size não tem onde agir. Ele se torna significativo quando o espaço em branco é mantido, o que ocorre em duas situações comuns:

Dentro de <pre> e <textarea>, que preservam o espaço em branco por padrão.
Em qualquer elemento onde você defina white-space como pre, pre-wrap ou pre-line.

Por isso o tab-size é a propriedade ideal quando você exibe código-fonte, tabelas ASCII ou qualquer conteúdo em que as colunas precisam estar alinhadas. A propriedade é uma das propriedades do CSS3 e é herdada, portanto defini-la em um contêiner aplica-se também ao texto pré-formatado aninhado.

Informação

Valores negativos são inválidos e a declaração é ignorada. O valor deve ser um <number> não negativo ou um <length> não negativo.

Valor Inicial	8
Aplica-se a	Todos os elementos, mas afeta apenas contêineres de bloco e elementos com espaço em branco preservado.
Herdado	Sim.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.tabSize = "20";

Sintaxe

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

<number> — o número de espaços que uma tabulação ocupa (ex.: tab-size: 4). É a forma mais comum. É relativo à fonte, portanto a tabulação permanece proporcional conforme o tamanho da fonte muda.
<length> — uma largura explícita, como tab-size: 2em ou tab-size: 20px. Útil quando você precisa de uma parada de tabulação fixa e independente da fonte.

Um caractere de tabulação nem sempre adiciona exatamente um tab-size de espaço. Assim como uma parada de tabulação real, ele avança o texto até o próximo limite de tabulação, portanto o espaço depende de quantos caracteres já precedem a tabulação naquela linha.

Exemplo da propriedade tab-size

Exemplo 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>

Experimente Você Mesmo »

Resultado

No exemplo apresentado, o tab-size do primeiro elemento é 5 e o do segundo elemento é 20.

Usando um valor de comprimento

Em vez de uma contagem de espaços, você pode fornecer uma largura fixa. Aqui, cada tabulação avança até um limite de 2em, independentemente da largura do espaço da fonte:

<!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 linha usa uma tabulação após o nome, a segunda coluna fica alinhada na mesma parada de tabulação de 2em.

Suporte dos navegadores

O tab-size é suportado por todos os navegadores modernos. A forma <number> tem o suporte mais amplo; a forma <length> é suportada nas versões atuais do Chrome, Edge, Firefox e Safari. Navegadores mais antigos podem precisar dos prefixos -moz-tab-size e -o-tab-size, mas estes não são mais necessários para navegadores atualizados.

Valores

Valor	Descrição	Experimente
number	Define o número de caracteres de espaço em uma tabulação. Valores negativos são inválidos. O valor padrão é 8.	Experimente »
length	Define a largura da tabulação. Valores negativos são inválidos. Este valor tem amplo suporte nos navegadores modernos.
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Prática

O que a propriedade 'tab-size' do CSS faz?

Controla a largura do caractere de tabulação.Determina o tamanho de uma imagem.Define o número de espaços que cada caractere de tabulação equivale.Controla a altura do caractere de tabulação.