Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété column-gap

Description de la propriété column-gap.

column-gap définit l'espacement entre les colonnes, dans le cadre d'une mise en page sur plusieurs colonnes (on ne parle pas ici des colonnes d'un tableau). column-gap ne change pas les espaces à gauche de la première colonne ni celui à droite de la dernière colonne.

Si une ligne de séparation est tracée entre les colonnes (voir column-rule) son épaisseur est prise sur celle définie par column-gap, cette dernière sera donc inchangée.

Syntaxes pour column-gap.

  • column-gap: normal;

    Valeur par défaut. L'espace entre les colonnes est fixé à 1em.

  • column-gap: 20px;

    Un nombre positif ou égal à zéro, suivi d'une unité de dimension (voir les unités de dimensions en CSS). L'espacement entre les colonnes est fixé à la valeur indiquée. Si la valeur est exprimée en pourcentage, ce dernier est calculé par rapport à la largeur de l'élément (et non pas la largeur d'une colonne).

  • column-gap: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

column-gap :
La mise en page sous forme de plusieurs colonnes est nécessaire lorsque les lignes de texte sont longues par rapport à la taille des caractères. L'œil a alors du mal à suivre la ligne d'un bout à l'autre, ce qui occasionne une fatigue oculaire plus importante. Cette disposition est la mise en page habituellement retenue par les journaux. L'espace entre les colonnes doit être suffisant pour que ces dernières soient clairement identifiables au premier coup d'œil. La justification du texte (comme dans cet exemple) améliore également la délimitation visuelle des colonnes.

Voir aussi...

Colonnes multiples - Propriétés.

  • break-after : Interdit ou impose des sauts (page, colonne...) après l'élément.
  • break-before : Interdit ou impose des sauts (page, colonne...) avant l'élément.
  • break-inside : Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
  • column-count : Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
  • column-fill : Gère la répartition du contenu entre les colonnes.
  • column-rule : Définit tous les paramètres du trait de séparation entre les colonnes.
  • column-rule-color : Définit la couleur des lignes de séparation de colonnes.
  • column-rule-style : Choisit le type de trait pour la séparation des colonnes.
  • column-rule-width : Définit l'épaisseur du trait de séparation entre les colonnes.
  • column-span : Gère le chevauchement du contenu sur plusieurs colonnes.
  • column-width : Définit la largeur des colonnes.
  • columns : Définit les caractéristiques d'une mise en page sur plusieurs colonnes.
  • orphans : Gestion des coupures en bas de page.
  • widows : Gestion des ruptures en haut de page.