Proprietà CSS tab-size

La proprietà CSS tab-size controlla la larghezza con cui viene visualizzato un carattere di tabulazione (U+0009). Per impostazione predefinita, il browser disegna ogni tabulazione come 8 spazi, il che è spesso molto più largo del necessario per gli elenchi di codice. tab-size consente di impostare quella larghezza su un qualsiasi numero di larghezze di spazio, oppure su una lunghezza CSS esatta.

Questa pagina illustra cosa fa la proprietà, dove ha effetto, la differenza tra i valori <number> e <length>, il supporto dei browser e un esempio eseguibile.

Quando è rilevante tab-size?

Una tabulazione modifica il layout visibile solo quando lo spazio vuoto circostante è preservato. Nel normale HTML, i browser comprimono tabulazioni, spazi e a capo in un unico spazio, quindi tab-size non ha nulla su cui agire. Diventa significativa quando lo spazio bianco viene mantenuto, il che accade in due situazioni comuni:

All'interno di <pre> e <textarea>, che preservano lo spazio bianco per impostazione predefinita.
Su qualsiasi elemento in cui si imposta white-space su pre, pre-wrap o pre-line.

Ecco perché tab-size è la proprietà da usare quando si visualizza codice sorgente, tabelle ASCII o qualsiasi cosa in cui le colonne devono essere allineate. La proprietà è una delle proprietà CSS3 ed è ereditata, quindi impostarla su un contenitore si applica anche al testo preformattato annidato.

Informazione

I valori negativi non sono validi e la dichiarazione viene ignorata. Il valore deve essere un <number> non negativo o una <length> non negativa.

Valore iniziale	8
Si applica a	Tutti gli elementi, ma influisce solo sui contenitori a blocchi e sugli elementi con spazio bianco preservato.
Ereditata	Sì.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.tabSize = "20";

Sintassi

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

<number> — il numero di larghezze di spazio che occupa una tabulazione (ad es. tab-size: 4). Questa è la forma più comune. È relativa al font, quindi la tabulazione rimane proporzionale al variare della dimensione del font.
<length> — una larghezza esplicita come tab-size: 2em o tab-size: 20px. Utile quando si necessita di un punto di tabulazione fisso, indipendente dal font.

Un carattere di tabulazione non aggiunge sempre uno spazio pari all'intero valore di tab-size. Come un vero punto di tabulazione, fa avanzare il testo fino al prossimo punto di tabulazione, quindi lo spazio dipende da quanti caratteri precedono già la tabulazione su quella riga.

Esempio della proprietà tab-size

Esempio di codice 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>

Provalo tu stesso »

Risultato

Nell'esempio, il tab-size del primo elemento è 5, quello del secondo elemento è 20.

Utilizzo di un valore lunghezza

Invece di un conteggio di spazi, è possibile specificare una larghezza fissa. In questo caso ogni tabulazione avanza fino a un punto di 2em indipendentemente dalla larghezza dello spazio del font:

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

Poiché ogni riga usa una tabulazione dopo il nome, la seconda colonna si allinea allo stesso punto di tabulazione 2em.

Supporto browser

tab-size è supportato da tutti i browser moderni. La forma <number> ha il supporto più ampio; la forma <length> è supportata nelle versioni attuali di Chrome, Edge, Firefox e Safari. I browser più vecchi potrebbero richiedere i prefissi -moz-tab-size e -o-tab-size, ma questi non sono più necessari per i browser aggiornati.

Valori

Valore	Descrizione	Provalo
number	Imposta il numero di caratteri spazio in una tabulazione. I valori negativi non sono validi. Il valore predefinito è 8.	Provalo »
length	Imposta la larghezza della tabulazione. I valori negativi non sono validi. Questo valore è ampiamente supportato dai browser moderni.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Pratica

Cosa fa la proprietà 'tab-size' in CSS?

Controlla la larghezza del carattere di tabulazione.Determina la dimensione di un'immagine.Imposta il numero di spazi a cui equivale ciascun carattere di tabulazione.Controlla l'altezza del carattere di tabulazione.