display

Chaque élément d’une page web est une boîte rectangulaire. La propriété display de CSS détermine précisément le comportement de cette boîte rectangulaire. Il n’y a qu’une poignée de valeurs qui sont couramment utilisées :

div { display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like <div> and <section> block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */}

La valeur par défaut pour tous les éléments est inline. La plupart des « User Agent Stylesheets » (les styles par défaut que le navigateur applique à tous les sites) réinitialisent de nombreux éléments à « block ». Passons en revue chacun de ces éléments, puis couvrons certaines des autres valeurs moins courantes.

Inline

La valeur par défaut pour les éléments. Pensez à des éléments comme <span><em>, ou <b> et à la façon dont l’enveloppement du texte dans ces éléments à l’intérieur d’une chaîne de texte ne casse pas le flux du texte.

L’élément <em> a une bordure rouge de 1px. Remarquez qu’il se trouve juste en ligne avec le reste du texte.

Un élément en ligne acceptera la marge et le padding, mais l’élément se trouve toujours en ligne comme vous pouvez vous y attendre. La marge et le padding ne repoussent les autres éléments qu’horizontalement, pas verticalement.

Un élément en ligne n’acceptera pas height et width. Il les ignorera tout simplement.

Bloc en ligne

Un élément défini sur inline-block est très similaire à inline dans le sens où il se mettra en ligne avec le flux naturel du texte (sur la  » ligne de base « ). La différence est que vous êtes en mesure de définir un width et un height qui seront respectés.

Block

Un certain nombre d’éléments sont définis comme block par la feuille de style UA du navigateur. Ce sont généralement des éléments conteneurs, comme <div><section>, et <ul>. Également des « blocs » de texte comme <p> et <h1>. Les éléments de niveau bloc ne se situent pas en ligne mais les dépassent. Par défaut (sans définir de largeur), ils occupent autant d’espace horizontal que possible.

Run-in

Premièrement, cette propriété ne fonctionne pas dans Firefox. On dit que la spécification la concernant n’est pas assez bien définie. Pour commencer à le comprendre cependant, c’est comme si vous vouliez qu’un élément d’en-tête se trouve en ligne avec le texte en dessous. Le flotter ne fonctionnera pas et rien d’autre non plus, car vous ne voulez pas que l’en-tête soit un enfant de l’élément de texte en dessous, vous voulez qu’il soit un élément indépendant. Dans les navigateurs  » compatibles « , c’est comme ça :

Flexbox

La propriété display est également utilisée pour les méthodes de mise en page new fangled comme Flexbox.

.header { display: flex;}

Il existe d’anciennes versions de la syntaxe flexbox, alors consultez cet article pour connaître la syntaxe d’utilisation de flexbox avec le meilleur support de navigateur. Assurez-vous de consulter ce guide complet sur Flexbox.

Flux-Root

La valeur d’affichage flow-root crée un nouveau « contexte de mise en forme de bloc », mais est autrement comme block. Un nouveau BFC aide à des choses comme l’effacement des flottants, supprimant le besoin de hacks pour le faire.

.group { display: flow-root;}

Grid

La disposition de la grille sera également définie initialement par la propriété display.

body { display: grid;}

Voici notre guide sur la disposition de la grille, qui comprend un tableau de prise en charge des navigateurs.

Aucune

Supprime complètement l’élément de la page. Notez que tant que l’élément est encore dans le DOM, il est supprimé visuellement et de toutes les autres manières imaginables (vous ne pouvez pas tabuler vers lui ou ses enfants, il est ignoré par les lecteurs d’écran, etc).

Valeurs de tableau

Il existe tout un ensemble de valeurs d’affichage qui forcent les éléments non-table à se comporter comme des éléments de tableau, si vous avez besoin que cela se produise. C’est assez rare, mais cela vous permet parfois d’être  » plus sémantique  » avec votre code tout en utilisant les pouvoirs de positionnement uniques des tableaux.

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 l’utiliser, il suffit d’imiter la structure normale des tableaux. Exemple simple:

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