Propiedad CSS border-spacing
La propiedad CSS border-spacing establece la distancia entre los bordes de las celdas de tabla adyacentes. Esta propiedad solo se aplica cuando el modelo de border-collapse es separate. Esta propiedad se ignorará si se utiliza el modelo de bordes colapsados.
La propiedad border-spacing se aplica a elementos HTML que se representan mediante el modelo de bordes separados. Determina el espacio entre las celdas, ya que los bordes distintos de las celdas de la tabla renderizados por el modelo de bordes separados no se comparten.
border-spacing se puede definir utilizando uno o dos valores de longitud. Si se proporcionan dos valores, el primero establece el espaciado horizontal y el segundo el espaciado vertical. Si solo se proporciona un valor, establece tanto el espaciado horizontal como el vertical en el valor especificado. No se permiten valores negativos.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Los elementos table y tablas en línea. |
| Heredable | No |
| Animable | Sí. La cantidad de 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 solo un 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>Resultado
A continuación se muestra otro ejemplo que tiene dos valores. El primer valor establece el espaciado horizontal y el segundo establece el espaciado vertical.
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>Ahora apliquemos algo de estilo al ejemplo de tabla anterior. Por ejemplo, agreguemos background-color. Esta propiedad establece el color de fondo de un elemento.
Ejemplo de 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>Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| length | Especifica la distancia entre celdas en px, em, etc. | Probarlo » |
| initial | Establece esta propiedad en su valor predeterminado. | Probarlo » |
| inherit | Hereda esta propiedad de su elemento padre. |
Práctica
¿Cuál es la función de la propiedad 'border-spacing' en CSS?