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é display

Description de la propriété display.

display définit la façon d'afficher un élément : sous forme d'un bloc, sur la ligne de texte, etc. Chaque élément du HTML a déjà un mode d'affichage par défaut mais la propriété display permet de changer ce mode.

Dans la pratique il est rare de changer la nature d'un élément très spécifique comme un élément de tableau mais display est particulièrement utile dans les cas suivants :

  • Faire disparaître un élément ( display:none )..
  • Déclarer un container flex. Voir le tutoriel sur les flex-box.
  • Déclarer un container grid. Voir le tutoriel sur les grilles CSS.

Syntaxes pour display.

  • display: none;

    L'élément ne sera pas affiché du tout. L'emplacement qu'il aurait occupé est disponible pour d'autres éléments.

  • display: inline;

    L'élément s'affiche sur la ligne de texte sans provoquer de retour à la ligne. Les dimensions de l'élément sont définies par son contenu : il n'est possible de changer la largeur ou la hauteur d'un élément inline avec les propriétés CSS width et height.

    Certains éléments HTML s'affichent pas défaut en mode inline : les liens a, les zones de saisie input, les balises span, etc.

  • display: block;

    L'élément est affiché comme un bloc : il sera précédé et suivi par un retour à la ligne et, sauf indication contraire, il occupera toute la largeur disponible.

    De nombreux éléments HTML s'affiche par défaut en mode block : les paragraphes p, les titres h1, h2, h3..., les cadres div, ainsi que les nouvelles balises section, article, etc.

  • display: inline-block;

    L'élément se comporte comme un élément inline sauf qu'il est possible de définir ses dimensions avec les propriétés width et height.

  • display: list-item;

    L'élément est affiché comme un élément de liste, avec une puce ou un numéro. C'est le mode d'affichage par défaut des éléments li.

  • display: flex;

    L'élément se comporte comme un élément du type block et est aussi un container flex pour les éléments qu'il contient. Reportez-vous aux explications détaillées sur le fonctionnement des flex-box.

  • display: inline-flex;

    L'élément se comporte comme un élément du type inline et est aussi un container flex pour les éléments qu'il contient. Reportez-vous aux explications détaillées sur le fonctionnement des flex-box.

  • display: grid;

    L'élément se comporte comme un élément du type block et organise les éléments qu'il contient sous forme d'une grille. Reportez-vous aux explications détaillées sur le fonctionnement des grilles CSS.
    Remarque : utilisez la valeur -ms-grid pour un fonctionnement correct sur IE.

  • display: inline-grid;

    L'élément se comporte comme un élément du type inline et est un container grid pour les éléments qu'il contient (disposition sous forme d'une grille). Reportez-vous aux explications détaillées sur le fonctionnement des grilles CSS.

  • display: contents;

    L'élément n'est pas affiché et de plus est retiré du DOM. Autrement dit, ses enfants (les éléments qu'il contient) prennent sa place dans la hiérarchie parent/enfants.

  • display: run-in;

    L'élément s'insère au début de l'élément qui le suit.

    Attention ! Valeur pour l'instant non reconnue par les navigateurs.

  • display: table;

    L'élément est affiché comme un tableau. C'est le mode d'affichage par défaut des éléments table.

  • display: inline-table;

    L'élément se comporte comme un élément inline et est aussi un container tableau pur les éléments qu'il contient. C'est le mode d'affichage par défaut des éléments table.

    Ceci est un élément qui prend place sur une ligne de texte
    abc
    efg
    et qui se comporte comme un tableau pour les éléments qu'il contient.
  • display: table-caption; display: table-header-group; display: table-footer-group; display: table-row-group; display: table-row; display: table-column; display: table-column-group; display: table-cell;

    Toutes ces valeurs correspondent à un des constituants d'un tableau.

    table-caption Le titre du tableau.
    Voir également la propriété CSS caption-side pour positionner le titre par rapport au tableau.
    table-header-group La ou les lignes d'en-tête dans un tableau. C'est le mode d'affichage par défaut des éléments thead.
    table-footer-group La ou les lignes de pied d'un tableau. C'est le mode d'affichage par défaut des éléments tfoot.
    table-row-group La ou les lignes du corps d'un tableau. C'est le mode d'affichage par défaut des éléments tbody.
    table-row Une ligne de tableau. C'est le mode d'affichage par défaut des éléments tr.
    table-column Une colonne de tableau. C'est le mode d'affichage par défaut des éléments col.
    table-column-group Un groupe de colonnes de tableau. C'est le mode d'affichage par défaut des éléments colgroup.
    table-cell Une cellule de tableau. C'est le mode d'affichage par défaut des éléments td.
  • display: ruby;

    L'élément est affiché comme un container ruby. En deux mots, une structure ruby permet d'afficher au dessus de chaque caractères d'une phrase un bref texte d'explication ou une information de phonétique. Cette présentation est très utilisée en écriture japonaise, coréenne, etc.

    📧mail   tel   📠fax   📱mobile  
  • display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container;

    Chacune de ces valeurs correspond à un des constituants d'une structure ruby.

  • display: inherit | initial | unset;

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

Simulateur.

Le simulateur applique la première série de valeurs aux éléments internes : quatre éléments de texte (balises span). La deuxième série de valeurs est appliquée au container.

display :
display :
CSS Cascading Style Sheets (feuilles de style en cascade) Un langage de formatage pour
les documents HTML et plus encore.

Prise en charge et compatibilité des navigateurs.

La propriété display et globalement bien prise en charge par les navigateurs actuels pour ce qui est des valeurs classiques : block, inline, etc. La valeur content pose encore des problèmes de compatibilité (voir le tableau de compatibilité ci-dessous).

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Affichage/masquage d'éléments - Propriétés.

Flex-box - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • flex : Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
  • flex-basis : Détermine la dimension par défaut d'un élément contenu dans un flex-box.
  • flex-direction : Choisit l'axe principal et l'axe secondaire d'un flex box.
  • flex-flow : Echaînement des éléments enfant dans un flex-box.
  • flex-grow : Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
  • flex-shrink : Autorise ou non la compression d'un élément contenu dans un flex-box.
  • flex-wrap : Gestion des retours à la ligne dans un container flex.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • order : Ordre des éléments dans un flex-box.