border-spacing

Índice

Definición de .border-spacing utilizado en CSS

La propiedad .border-spacing en CSS controla qué tan separadas están las celdas en un elemento

(o un elemento que se hace como una tabla a través de la pantalla: tabla;).

Caso de empleo de border-spacing

Esta propiedad de CSS normalmente se emplea de esta forma:

table {
  border-collapse: separate;

  border-spacing: 5px;
  border-spacing: 1vw;
  border-spacing: 2em;
}

Otro ejemplo más avanzado de .border-spacing es el siguiente de CODEPEN:

Sintaxis de .border-spacing en CSS

border-spacing: length|initial|inherit;

Valores

Valor Descripción Manifestación
longitud longitud Especifica la distancia entre los bordes de las celdas adyacentes en px, cm, etc. No se permiten valores negativos.
  • Si se especifica un valor, define el espacio horizontal y vertical entre las celdas
  • Si se especifican dos valores, el primero establece el espaciado horizontal y el segundo establece el espaciado vertical
inicial Establece esta propiedad en su valor predeterminado.
heredar Hereda esta propiedad de su elemento principal.

Exploradores compatibles con .border-spacing

Los números de la tabla especifican la primera versión del navegador que es completamente compatible con la propiedad.

Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
bottom 1.0 5.0 1.0 1.0 6.0

Referencias técnicas

Puede que también quieras echar un vistazo a estas propiedades

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso