Cours CSS / display : block, inline, inline-block et masquage

La propriété display détermine comment un élément génère des boîtes et participe à la mise en page. block, inline et inline-block se comportent différemment dans le flux normal ; display: none supprime la boîte, tandis que visibility: hidden laisse son espace de mise en page.

Comparez block, inline et inline-block

Les éléments div et p sont généralement affichés en bloc, tandis que span et a sont généralement affichés en ligne. Si vous ne donnez pas à un bloc une largeur séparée, il remplira généralement la largeur disponible de son parent. L'inline est placé dans une ligne comme les lettres dans une phrase, ce qui permet au contenu long d'être réparti sur plusieurs lignes. Un inline-block est traité comme une seule boîte placée dans une ligne, donc même si le contenu à l’intérieur de la boîte passe à la ligne, la boîte elle-même n'est pas divisée en plusieurs morceaux comme le serait un inline classique.

.item { width: 120px; height: 48px; padding: 8px; margin: 8px; }
.blocks .item { display: block; }
.inlines .item { display: inline; }
.inline-blocks .item { display: inline-block; }

L'exemple entier donne la même taille et la même marge aux mêmes trois span et ne change que l'affichage. block place chaque élément sur une nouvelle ligne, tandis que inline-block les place sur la même ligne s'il y a de la place. Les déclarations width et height sur un élément inline ne modifient pas la taille réelle de la boîte du span de texte simple, même si elle reste dans la liste de style. Vérifiez séparément la déclaration calculée et la taille effectivement utilisée.

Comprendre l'espacement en ligne et les éléments remplacés

Dans l'inline régulier, les marges et le padding gauche et droit affectent l'espace à l'intérieur de la ligne. Le padding et les bordures en haut et en bas peuvent être dessinés, mais ne déterminent pas la hauteur de ligne en repoussant les lignes environnantes comme le font les blocs. Si vous donnez un padding vertical important à du texte sur plusieurs lignes, les zones peintes peuvent se chevaucher. Tout au long de l'exemple, nous observons l'affichage en autorisant une certaine marge dans la hauteur de ligne.

N’appliquez pas « les éléments inline ne peuvent pas être dimensionnés » à chaque élément. Les éléments remplacés, comme img, affichent un contenu externe et peuvent utiliser la largeur et la hauteur même lorsque leur affichage par défaut est inline. Le rectangle bleu dans l'exemple mesure 120 × 60px. Traitez-le différemment d'une simple balise de texte. Le guide MDN des dispositions bloc et inline explique le flux sous-jacent.

Comparer display: none et visibility: hidden

Le DOM (Document Object Model) est un modèle dans lequel les navigateurs traitent les documents HTML comme une structure d'éléments. Masquer avec CSS est différent de supprimer un élément HTML. Les paragraphes avec display: none peuvent également être trouvés dans Elements dans les outils de développement. Dans les lignes « Front », cible, « Back » de l’exemple complet, visibility: hidden laisse un espace vide à la position de la cible. Avec display: none, le texte « Back » se rapproche de « Front ».

Masquer un élément peut modifier l'accès via le clavier et sa disponibilité pour la technologie d'assistance ainsi que son apparence. Cet exercice compare l'espace de boîte dans un document statique. Pour les vrais menus et contrôles, vérifiez également la gestion du focus et si les informations nécessaires restent accessibles. Voir MDN: display, MDN: visibility.

Aligner les boîtes inline-block dans le flux normal

Parce que inline-block est à l'intérieur d'une ligne de texte, il est aligné par défaut sur la ligne de base de la ligne. Si vous voyez un espace vide sous un élément ou si des éléments de hauteurs différentes sont mal alignés, vérifiez ensemble vertical-align et line-height. Même les espaces ou les sauts de ligne entre les éléments en HTML peuvent être des écarts visibles dans le placement en ligne.

Même si vous changez l'apparence avec display, le span n'a pas de signification de titre ou le div ne fonctionne pas comme un bouton. Choisissez le HTML qui correspond à votre intention et définissez son emplacement. Si vous devez gérer l'alignement, l'espacement et la taille de plusieurs boîtes ensemble, les règles que vous apprendrez plus tard dans Flexbox et Grid peuvent être plus appropriées. Une fois que vous comprenez le flux de base, il devient plus facile de déterminer quelles modifications apportent les changements d'agencement. La manière de placer les éléments le long d'un axe est traitée dans un exemple complet dans Les bases de Flexbox : conteneur, éléments et axes. La manière de concevoir des lignes et des colonnes ensemble est traitée dans un exemple complet dans Les bases de CSS Grid : pistes, lignes et placement des éléments.

Exécutez l'exemple et modifiez une valeur à la fois

Enregistrez le code ci-dessous en UTF-8 dans display.html et ouvrez-le. Les exemples d'images contiennent des données SVG qui peuvent être exécutées sans fichier. Comparez trois méthodes de placement et trois états cachés dans le même document.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparison of display and hiding</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .example { margin-block: 24px; padding: 8px; border: 1px dashed #777; }
    .item { width: 120px; height: 48px; padding: 8px; margin: 8px;
      border: 1px solid #a8653e; background: #ffe8dd; }
    .blocks .item { display: block; }
    .inlines { line-height: 3; }
    .inlines .item { display: inline; }
    .inline-blocks .item { display: inline-block; }
    .visibility-row { margin-block: 16px; padding: 8px; border: 1px solid #aaa; }
    .target { display: inline-block; width: 120px; height: 48px; background: #d9eee2; }
    .none .target { display: none; }
    .hidden .target { visibility: hidden; }
    .replaced { width: 120px; height: 60px; vertical-align: middle; }
  </style>
</head>
<body>
  <h1>Comparing block and inline elements</h1>
  <h2>block</h2><div class="example blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline</h2><div class="example inlines"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline-block</h2><div class="example inline-blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>Comparing visible, hidden, and removed boxes</h2>
  <div class="visibility-row">Front <span class="target">Visible target</span> Back</div>
  <div class="visibility-row hidden">Front <span class="target">Hidden target</span> Back</div>
  <div class="visibility-row none">Front <span class="target">Target with no box</span> Back</div>
  <h2>An image as an inline replaced element</h2>
  <p>Front <img class="replaced" alt="A blue rectangle 120px wide and 60px tall." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Crect width='48' height='24' fill='%237ebad3'/%3E%3C/svg%3E"> Back</p>
</body>
</html>

1. Dans les outils de développement, vérifiez la taille des éléments block et inline-block jusqu'à leurs bordures. Elle est de 120×48 px en raison de la règle commune border-box. Les éléments inline ne sont pas fixés à une largeur de 120 px même s'ils ont la même déclaration de largeur.
2. Réduisez la fenêtre pour voir si le troisième élément de l'inline-block passe à la ligne suivante. Chaque bloc commence sur une nouvelle ligne, même sur des écrans larges.
3. Désactivez display: none dans la règle .none .target. Observez le déplacement du texte « Back » lorsque la cible réapparaît. Désactivez ensuite visibility: hidden dans .hidden .target : la cible réapparaît dans l’espace déjà réservé, sans déplacer le texte voisin.
4. Changez uniquement la largeur de l'image à 160px. Contrairement à un span inline ordinaire, l’image change de taille. Vérifiez ce résultat, puis rétablissez la largeur à 120px. Si vous maintenez la hauteur de 60px fixe et ne changez que la largeur, le ratio original sera modifié.

Si le placement est différent de ce qui est attendu, vérifiez la valeur finale de display, la méthode de placement du parent, la taille de la boîte et la hauteur de ligne. Plutôt que d'ajouter encore et encore des déclarations de taille qui ne s'appliquent pas, il est utile de distinguer d'abord les types d'éléments et les flux de base.