Border-spacing - Propriété CSS

Schéma de la syntaxe de border-spacing.

Schéma syntaxique de la propriété border-spacing.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

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.

Accéder à la propriété border-spacing par programme.

Ajuster l'espacement des cellules d'un tableau avec Javascript.

En Javascript, voici comment modifier l'espacement des cellules dans un tableau. Deux syntaxes sont possibles : la première utilise une notation du genre tableau, avec le nom de la propriété écrit en kebab-case, la deuxième utilise une syntaxe objet et le nom de la propriété est écrit en camel-case.

let el = document.getElementById('id'); el.style['border-spacing'] = '3mm'; // ou let el = document.getElementById('id'); el.style.borderSpacing = '3mm';

Avec Javascript, lire la valeur de border-spacing.

La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['border-spacing']; // ou let el = document.getElementById('id'); let value = el.style.borderSpacing;

Avec Javascript, lire la valeur calculée de border-spacing.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives, et de la prise en compte éventuelle des valeurs héritées. A défaut, la valeur calculée sera la valeur initiales de la propriété (0 dans le cas de border-spacing).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('border-spacing');

Avec JQuery, modifier la valeur de border-spacing.

JQuery propose également deux syntaxes, plus courtes que celles de Javascript.


$('#id').css('border-spacing', '3mm');
// ou
$('#id').css('borderSpacing', '3mm');


Avec JQuery, lire la valeur calculée de border-spacing.

let value = $('#id').css('border-spacing');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété border-spacing et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de border-spacing. On constate en particulier que toutes les unités sont converties en pixels.

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

  Ce module de spécification définit un système de mise en page basé sur un tableau, optimisé pour le rendu des données tabulaires. Dans ce modèle de disposition, chaque cellule est attribué à une intersection entre un ensemble de lignes consécutives et un ensemble de colonnes consécutives, eux-mêmes générés à partir de la structure de la table et dimensionnés en fonction de leur contenu.

  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 :