LA CASCADE

Chaque élément d'une page web est une boîte rectangulaire. La propriété display détermine la façon dont cette boîte rectangulaire va se comporter. Seules quelques valeurs sont communément utilisées :

//CSS
div {
  display: inline;        /* Par défaut */
  display: inline-block;  /* Caractéristique des blocs, mais sur une ligne */
  display: block;
  display: run-in;        /* Rare, compatibilité limitée */
  display: none;          /* Cacher */
}

La valeur par défaut pour tous les éléments est inline. La plupart des “User Agent stylesheets” (les styles par défaut appliqués par les navigateurs) règlent de nombreux éléments sur la valeur block. Passons en revue chacune de ces valeurs, et d'autres moins connues.

Inline

La valeur par défaut pour les éléments. Pensez à des éléments comme <span>, <em>, ou <b> et au fait que lorsque ces balises enveloppent un texte, le flux n'est pas brisé.

L'élément em a une bordure rouge solide de 1px. Remarquez comme il est en ligne avec le reste du texte.

Un élément inline accepte des marges et du padding, mais les éléments restent bien en ligne comme souhaité. Les marges et paddings ne repousseront les autres éléments que sur le plan horizontal, pas vertical.

Un élément inline n'accepte pas de height ni de width. Si vous les lui donnez, il les ignorera.

Inline Block

Un élément réglé sur inline-block est très similaire à un élément inline, dans la mesure où il respectera le flux du texte (sur la ligne de base). La différence est que vous pouvez lui donner une hauteur et une largeur, qui sera respectée.

Block

De nombreux éléments sont réglés sur block par le navigateur lui-même. Ce sont en général des éléments conteneurs, comme <div>, section>, <ul>, mais aussi <p> et <h1>. Les éléments de niveau bloc ne restent pas en ligne, il y a un saut de ligne après chacun. Par défaut (sans avoir à donner de largeur), ils prennent tout l'espace horizontal possible.

Les 2 éléments entourés de rouge sont des paragraphes, qui sont des éléments de niveau bloc. L'élément em entre les deux n'est pas en ligne parce que les blocs provoquent un saut de ligne.

Run-in

Attention, cette propriété ne fonctionne pas dans Firefox. Il paraît que la spécification n'est pas encore assez bien définie. Pour comprendre comment elle fonctionne, il faut l'imaginer comme un élément de titre qui serait en ligne avec le texte. Si on essayait d'arriver au même résultat avec float, ça ne marcherait pas, et d'ailleurs il n'y aurait pas d'autre solution, car vous ne voulez pas voir votre titre devenir un enfant du texte qui le suit, il doit rester dans son propre élément. Dans les navigateurs compatibles, voici ce que ça donne :

None

Cette valeur supprime complètement l'élément de la page. Remarquez que même si l'élément est toujours dans le DOM, il est supprimé visuellement et de toute autre manière (il est inaccessible par les touches de tabulation — ainsi que ses enfants, il est ignoré par les lecteurs d'écrans, etc.)

Valeurs de tables

Il existe tout un tas de valeurs de tables pour forcer des éléments à se comporter comme des éléments de table, si vous en avez besoin. C'est assez rare, mais ça vous permet parfois d'avoir un code plus sémantique tout en utilisant les possibilités uniques des tables pour le positionnement.

//CSS
div {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}

Pour les utiliser, il suffit d'imiter une structure de table normale, comme dans cet exemple simple :

//HTML
<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      Gross but sometimes useful.
    </div>
  </div>
</div>

Flexbox

La propriété display se retrouve également dans la méthode de mise en page Flexbox :

//CSS
.header {
  display: flex;
}

Il y a plusieurs syntaxes, consultez ce guide pour utiliser au mieux Flexbox.

Grid

La mise en page à l'aide de grilles (Grid Layout), dont la compatibilité est pour l'instant limitée à IE, peut être initialisée avec la propriété display.

//CSS
body {
  display: grid;
}

Autres ressources à consulter sur ce sujet :

MDN : display
Référence SitePoint (en anglais)
CSS reference Codrops (en anglais)
Spécification W3C (en anglais)
Can I use : Flexbox
Can I use : Grid Layout

Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : Chris Coyier est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.

Menu

Display