Propriedade CSS border-spacing

A propriedade CSS border-spacing define a distância entre as bordas de células vizinhas em tabelas. É o equivalente CSS do antigo atributo HTML cellspacing, mas com mais controle: você pode definir os espaçamentos horizontal e vertical de forma independente.

Esta página explica o que border-spacing faz, quando ela de fato tem efeito, os valores aceitos e vários exemplos executáveis.

Quando border-spacing se aplica

border-spacing só funciona no modelo de bordas separadas — ou seja, quando border-collapse está definido como separate (o padrão). Nesse modelo, cada célula mantém sua própria borda, portanto existe um espaço real entre as células que a propriedade pode controlar.

Se você mudar para o modelo de colapso (border-collapse: collapse), as bordas adjacentes se fundem em uma única borda compartilhada e não há espaço a dimensionar, então border-spacing é ignorada. Sempre que o espaçamento parecer não funcionar, verifique se border-collapse não está definido como collapse.

Valores e sintaxe

border-spacing aceita um ou dois valores de comprimento:

Um valor — aplica o mesmo espaçamento horizontal e verticalmente (por exemplo, border-spacing: 20px).
Dois valores — o primeiro define o espaçamento horizontal e o segundo define o espaçamento vertical (por exemplo, border-spacing: 20px 30px).

Os comprimentos podem usar qualquer unidade CSS (px, em, rem, etc.). Valores negativos não são permitidos, e porcentagens não são aceitas.

Valor Inicial	0
Aplica-se a	Os elementos de tabela table e tabela inline.
Herdado	Não
Animável	Sim. O valor do espaçamento é animável.
Versão	CSS2
Sintaxe DOM	object.style.borderSpacing = "10px";

Sintaxe

Sintaxe da propriedade CSS border-spacing

border-spacing: length | initial | inherit;

Exemplo da propriedade border-spacing com um valor:

Exemplo da propriedade CSS border-spacing com apenas um valor

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

Experimente Você Mesmo »

Resultado

Aqui está outro exemplo que usa dois valores. O primeiro valor define o espaçamento horizontal e o segundo define o espaçamento vertical, de modo que o espaço entre colunas difere do espaço entre linhas.

Exemplo da propriedade border-spacing com dois valores:

Exemplo da propriedade CSS border-spacing com dois valores

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

Experimente Você Mesmo »

Agora vamos adicionar alguma estilização ao exemplo de tabela acima. Por exemplo, vamos adicionar background-color. Essa propriedade define a cor de fundo de um elemento.

Exemplo de uso da propriedade border-spacing com a propriedade background-color:

Exemplo da propriedade CSS border-spacing com a propriedade 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>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
length	Especifica a distância entre as células em px, em, etc.	Experimente »
initial	Define esta propriedade com seu valor padrão.	Experimente »
inherit	Herda esta propriedade do elemento pai.

Propriedades relacionadas

border-collapse — decide se as bordas das células são separadas (para que border-spacing funcione) ou colapsadas.
empty-cells — controla se bordas e fundos são desenhados ao redor de células vazias no modelo separado.
border-color — define a cor das bordas das células que border-spacing afasta.
HTML tables — a marcação à qual esses estilos se aplicam.

Prática

Qual é a função da propriedade 'border-spacing' em CSS?

Define as distâncias entre as bordas de células adjacentes em tabelas CSS.Define a largura da borda de um elemento.Representa a cor da borda de um elemento.Refere-se ao estilo da borda de um elemento.Pode aceitar dois valores para controlar o espaçamento horizontal e vertical.