Propriété CSS border-spacing

La propriété CSS border-spacing est utilisée pour définir la distance entre les bordures des cellules de table avoisinants. Cette propriété n'est appliquée que le border-collapse est séparé. Si on a utilisé un modèle de bordure éffondrée, cette propriété est ignorée.

La propriété border-spacing peut être spécifiée en utilisant une ou deux valeurs de longueur. S'il y a deux valeurs donnée, la première définit l'espacement horizontal, et la deuxième définit l'espacement vértical. S'il y a seulement une valeur donnée, elle définit les espacements horizontal et vertical à la valeur spécifiée. Les valeurs négatives ne sont pas permises.

Valeur initiale 0
Appliquée à Le tableau et les éléments en ligne des tableaux.
Héritée Non
Animable Oui. Le nombre d'espacement est animable.
Version CSS2
Syntaxe DOM object.style.borderSpacing = "10px";

Syntaxe

border-spacing: length | initial | inherit;

Voyons un exemple, qui a une seule valeur.

Exemple



  
    Titre du document
    
  
  
    

Exemple de border-spacing: 20px;

Prénom Nom
Marie Legrande
Michel Larousse

Voici un autre exemple, qui a deux valeurs.

Exemple



  
    Titre du document
    
  
  
    
Titre Titre Titre Titre
Quelque texte Quelque texte Quelque texte Quelque texte
Quelque texte Quelque texte Quelque texte Quelque texte

Maintenant, nous allons donner un style à ce table. Par exemple, ajoutons background-color, qui définit le couleur de fond de l'élément.

Exemple



  
    Titre du document
    
  
  
    

Exemple de border-spacing: 20px;

Prénom Nom
Marie Legrande
Michel Larousse

Valeurs

Valeur Description
length Spécifie la distance entre les cellules en px, em, ou %.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Pratiquez vos connaissances

Qu'est-ce que la propriété 'border-spacing' en CSS?
Trouvez-vous cela utile?