Proprietà CSS border-spacing

La proprietà CSS border-spacing imposta la distanza tra i bordi delle celle adiacenti di una tabella. È l'equivalente CSS del vecchio attributo HTML cellspacing, ma con un controllo maggiore: è possibile definire i margini orizzontali e verticali in modo indipendente.

Questa pagina illustra cosa fa border-spacing, quando ha effetto, i valori accettati e vari esempi eseguibili.

Quando si applica border-spacing

border-spacing funziona solo nel modello a bordi separati — ovvero quando border-collapse è impostato su separate (valore predefinito). In questo modello ogni cella mantiene il proprio bordo, quindi esiste uno spazio reale tra le celle che la proprietà può controllare.

Se si passa al modello a bordi collassati (border-collapse: collapse), i bordi adiacenti si uniscono in un unico bordo condiviso e non rimane alcuno spazio da dimensionare, per cui border-spacing viene ignorato. Se la spaziatura non sembra avere effetto, verificare che border-collapse non sia impostato su collapse.

Valori e sintassi

border-spacing accetta uno o due valori di lunghezza:

Un valore — applica lo stesso margine sia orizzontalmente che verticalmente (ad esempio border-spacing: 20px).
Due valori — il primo imposta la spaziatura orizzontale, il secondo quella verticale (ad esempio border-spacing: 20px 30px).

Le lunghezze possono utilizzare qualsiasi unità CSS (px, em, rem, ecc.). I valori negativi non sono consentiti e le percentuali non sono accettate.

Valore iniziale	0
Si applica a	Gli elementi table e gli elementi table inline.
Ereditato	No
Animabile	Sì. Il valore della spaziatura è animabile.
Versione	CSS2
Sintassi DOM	object.style.borderSpacing = "10px";

Sintassi

Sintassi della proprietà CSS border-spacing

border-spacing: length | initial | inherit;

Esempio della proprietà border-spacing con un valore:

Esempio della proprietà CSS border-spacing con un solo valore

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      .table {
        border-collapse: separate;
        border-spacing: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Example of border-spacing: 20px;</h2>
    <table class="table">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>

Provalo tu stesso »

Risultato

Ecco un altro esempio che utilizza due valori. Il primo valore imposta la spaziatura orizzontale e il secondo quella verticale, quindi il margine tra le colonne è diverso da quello tra le righe.

Esempio della proprietà border-spacing con due valori:

Esempio della proprietà CSS border-spacing con due valori

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-spacing: 20px 30px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Provalo tu stesso »

Ora aggiungiamo uno stile all'esempio di tabella precedente. Ad esempio, aggiungiamo background-color, che imposta il colore di sfondo di un elemento.

Esempio di utilizzo della proprietà border-spacing con la proprietà background-color:

Esempio della proprietà CSS border-spacing con la proprietà background-color

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      .table {
        border-collapse: separate;
        border-spacing: 20px;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <h1>Example of border-spacing: 20px;</h1>
    <table class="table">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione	Provalo
length	Specifica la distanza tra le celle in px, em, ecc.	Provalo »
initial	Imposta questa proprietà al suo valore predefinito.	Provalo »
inherit	Eredita questa proprietà dall'elemento padre.

Proprietà correlate

border-collapse — stabilisce se i bordi delle celle sono separati (in modo che border-spacing funzioni) o collassati.
empty-cells — controlla se i bordi e gli sfondi vengono disegnati attorno alle celle vuote nel modello separato.
border-color — imposta il colore dei bordi delle celle che border-spacing separa.
HTML tables — il markup a cui si applicano questi stili.

Esercitazione

Pratica

Qual è la funzione della proprietà 'border-spacing' in CSS?

Imposta le distanze tra i bordi delle celle adiacenti nelle tabelle CSS.Definisce la larghezza del bordo di un elemento.Rappresenta il colore del bordo di un elemento.Indica lo stile del bordo di un elemento.Può accettare due valori per controllare la spaziatura orizzontale e verticale.