Border-spacing - Propriété CSS

Schéma de la syntaxe de border-spacing.

Description des termes utilisés sur le schéma :

• length est une valeur numérique suivie d'une des unités de dimension.
• La valeur peut figurer une ou deux fois dans la syntaxe avec un espace de séparation.

Description de la propriété border-spacing.

border-spacing définit l'espace entre les cellules d'un tableau. Cette propriété n'a d'effet que si border-collapse a la valeur separate.

Sur le pourtour du tableau, l'espace entre les cellules s'ajoute aux marges intérieures du tableau (padding).

Le navigateur peut être amené à modifier les dimensions du tableau ou celles des cellules pour appliquer la valeur de border-spacing.

Valeurs pour border-spacing.

• border-spacing: 5px;

  Une valeur positive ou nulle, suivie d'une unité de dimension (voir les unités de dimension). L'espace entre les cellules du tableau sera fixé à cette valeur.
  Les pourcentages ne sont pas autorisés.

• border-spacing: 5px 10px;

  Deux valeurs positives ou nulles, suivies de leur unité de dimension.
  La première valeur définit l'espace horizontal entre deux cellules adjacente du tableau, et la deuxième définit l'espace vertical.

• border-spacing: initial; (0) border-spacing: inherit; border-spacing: revert; border-spacing: revertLayer; border-spacing: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de border-spacing.

border-spacing peut être animée mais l'animation risque d'être peu fluide car elle suppose des calculs lourds sur tout le tableau. D'autre part, les éléments qui suivent le tableau doivent être repositionnés en fonction de l'agrandissement ou du rétrécissement du tableau, ce qui ralentit encore l'animation. Pour éviter ce deuxième problème, le tableau ci-dessous a été positionné en absolu.

Exemple interactif avec la propriété border-spacing.

Compatibilité des navigateurs avec border-spacing.

Aucun problème de compatibilité à signaler. La propriété border-spacing est bien gérée par tous les navigateurs actuels.

1

Propriété
border-spacing

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété border-spacing.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant border-spacing. Introduction de la propriété border-spacing dans la version 2.xx de CSS.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Tableaux - Niveau 3

  Concernant border-spacing. Pas de changement concernant la propriété border-spacing.
  

  25 Octobre 2016

  Document de travail.

  

  

  

Voir aussi, concernant les tableaux.

La spécification du W3C "Module CSS - Tableaux" regroupe les définitions concernant spécifiquement la mise en forme des tableaux, mais de nombreuses propriétés plus générales peuvent également s'appliquer aux tableaux ou aux parties de tableaux : dimensions, marges, etc.

Propriétés :