Propiedad CSS border-spacing

La propiedad CSS border-spacing establece la distancia entre los bordes de las celdas de tabla vecinas. Es el equivalente CSS del antiguo atributo HTML cellspacing, pero con mayor control: puedes definir los espacios horizontal y vertical de forma independiente.

Esta página explica qué hace border-spacing, cuándo surte efecto, los valores que acepta y varios ejemplos ejecutables.

Cuándo se aplica border-spacing

border-spacing solo funciona en el modelo de bordes separados, es decir, cuando border-collapse está configurado como separate (el valor predeterminado). En este modelo cada celda conserva su propio borde, por lo que existe un espacio real entre celdas que la propiedad puede controlar.

Si cambias al modelo de colapso (border-collapse: collapse), los bordes adyacentes se fusionan en un único borde compartido y no hay espacio que dimensionar, por lo que border-spacing se ignora. Si el espaciado parece no hacer nada, comprueba que border-collapse no esté establecido en collapse.

Valores y sintaxis

border-spacing acepta uno o dos valores de longitud:

Un valor — aplica el mismo espacio horizontal y verticalmente (por ejemplo border-spacing: 20px).
Dos valores — el primero establece el espaciado horizontal y el segundo el vertical (por ejemplo border-spacing: 20px 30px).

Las longitudes pueden usar cualquier unidad CSS (px, em, rem, etc.). No se permiten valores negativos y no se aceptan porcentajes.

Valor inicial	0
Se aplica a	Los elementos table y de tabla en línea.
Heredado	No
Animable	Sí. El valor del espaciado es animable.
Versión	CSS2
Sintaxis DOM	object.style.borderSpacing = "10px";

Sintaxis

Sintaxis de la propiedad CSS border-spacing

border-spacing: length | initial | inherit;

Ejemplo de la propiedad border-spacing con un valor:

Ejemplo de la propiedad CSS border-spacing con un solo 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>

Pruébalo tú mismo »

Resultado

A continuación se muestra otro ejemplo que usa dos valores. El primero establece el espaciado horizontal y el segundo el vertical, de modo que el espacio entre columnas difiere del espacio entre filas.

Ejemplo de la propiedad border-spacing con dos valores:

Ejemplo de la propiedad CSS border-spacing con dos 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>

Pruébalo tú mismo »

Ahora vamos a aplicar algo de estilo al ejemplo de tabla anterior. Por ejemplo, añadamos background-color, que establece el color de fondo de un elemento.

Ejemplo del uso de la propiedad border-spacing con la propiedad background-color:

Ejemplo de la propiedad CSS border-spacing con la propiedad 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>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
length	Especifica la distancia entre celdas en px, em, etc.	Pruébalo »
initial	Establece esta propiedad en su valor predeterminado.	Pruébalo »
inherit	Hereda esta propiedad de su elemento padre.

Propiedades relacionadas

border-collapse — decide si los bordes de las celdas están separados (para que border-spacing funcione) o colapsados.
empty-cells — controla si se dibujan bordes y fondos alrededor de las celdas vacías en el modelo separado.
border-color — establece el color de los bordes de celda que border-spacing separa.
HTML tables — el marcado al que se aplican estos estilos.

Práctica

¿Cuál es la función de la propiedad 'border-spacing' en CSS?

Establece las distancias entre los bordes de las celdas adyacentes en tablas CSS.Define el ancho del borde de un elemento.Representa el color del borde de un elemento.Se refiere al estilo del borde de un elemento.Puede aceptar dos valores para controlar el espaciado horizontal y vertical.