Le display CSS : block, inline, inline-block

Bienvenue dans cette leçon fondamentale sur l'une des propriétés CSS les plus cruciales : display. Comprendre comment les éléments HTML sont affichés par le navigateur est essentiel pour créer des mises en page (layouts) efficaces et responsives. La propriété display contrôle le comportement d'affichage de chaque élément sur une page web.

Nous allons explorer en détail les trois valeurs les plus courantes et les plus importantes de cette propriété : block, inline et inline-block.

Introduction à la Propriété display

En HTML, chaque élément possède un comportement d'affichage par défaut. Par exemple, un paragraphe (<p>) commence sur une nouvelle ligne et occupe toute la largeur disponible, tandis qu'un lien (<a>) s'affiche au sein du texte environnant et n'occupe que l'espace nécessaire à son contenu. Cette différence de comportement est gérée par la propriété display.

La propriété display vous permet de changer le comportement d'affichage par défaut d'un élément HTML. C'est un outil puissant pour maîtriser le flux de votre contenu et la structure de votre page.

Comprendre ces concepts vous permettra de :

• Positionner correctement vos éléments.
• Contrôler l'espace qu'ils occupent.
• Construire des interfaces utilisateur complexes avec plus de facilité.

1. Les Éléments de Type block

Les éléments de type block (bloc) sont les "bâtisseurs" de la mise en page. Ils sont conçus pour structurer le contenu principal d'une page.

Caractéristiques Principales des Éléments block :

• Commencent sur une nouvelle ligne : Chaque élément block commence systématiquement sur une nouvelle ligne, poussant l'élément précédent ou suivant à la ligne.
• Occupent toute la largeur disponible : Par défaut, un élément block s'étend sur toute la largeur de son conteneur parent, même si son contenu ne remplit qu'une petite partie de cet espace.
• Acceptent les propriétés de la Box Model : Vous pouvez appliquer librement width, height, margin (marges extérieures), padding (marges intérieures) et border (bordures) à ces éléments.
• Peuvent contenir d'autres éléments block et inline : Ils servent souvent de conteneurs pour organiser d'autres éléments.

Exemples d'éléments HTML par défaut de type block :

• <p> (paragraphe)
• <h1> à <h6> (titres)
• <div> (division générique, très utilisée)
• <ul>, <ol>, <li> (listes)
• <form>
• <header>, <footer>, <section>, <article>, aside, nav (éléments sémantiques HTML5)

Quand utiliser display: block ?

Utilisez display: block pour les éléments qui doivent se présenter comme des blocs de contenu indépendants, occupant leur propre ligne et pouvant être dimensionnés et espacés précisément. C'est la base pour les sections de votre page.

2. Les Éléments de Type inline

Les éléments de type inline (en ligne) sont conçus pour se fondre dans le flux du texte, un peu comme des mots dans une phrase.

Caractéristiques Principales des Éléments inline :

• Ne commencent pas sur une nouvelle ligne : Ils s'affichent les uns à côté des autres sur la même ligne, tant qu'il y a de la place.
• Occupent uniquement la largeur nécessaire à leur contenu : Ils ne prennent pas toute la largeur disponible, seulement l'espace requis par leur contenu.
• Limitations de la Box Model :
  • Les propriétés width et height (largeur et hauteur) sont ignorées. La taille de l'élément est déterminée par son contenu.
  • Les marges verticales (margin-top, margin-bottom) sont ignorées.
  • Les marges horizontales (margin-left, margin-right) sont appliquées.
  • Le padding (remplissage intérieur) et le border (bordure) sont appliqués, mais ils peuvent empiéter sur le contenu des lignes adjacentes verticalement.
• Ne peuvent contenir que d'autres éléments inline ou du texte : Ils ne sont pas faits pour contenir des éléments de type block.

Exemples d'éléments HTML par défaut de type inline :

• <a> (lien hypertexte)
• <span> (élément générique en ligne, très utilisé)
• <strong> (texte important), <em> (texte mis en emphase)
• <img> (image)
• <input>, <button>, <label>, <select>, <textarea> (éléments de formulaire)

Quand utiliser display: inline ?

Utilisez display: inline pour les éléments qui font partie d'un flux de texte, comme des mots, des phrases ou de petits fragments de contenu que vous souhaitez styliser sans perturber le flux de la ligne.

3. Les Éléments de Type inline-block

Le type inline-block est un hybride, combinant les meilleures caractéristiques des types inline et block. Il offre une flexibilité considérable pour les mises en page.

Caractéristiques Principales des Éléments inline-block :

• Ne commencent pas sur une nouvelle ligne : Comme les éléments inline, ils s'affichent les uns à côté des autres sur la même ligne.
• Acceptent les propriétés de la Box Model : Comme les éléments block, vous pouvez leur appliquer width, height, margin (verticales et horizontales), padding et border sans aucune limitation.
• Occupent uniquement la largeur nécessaire à leur contenu (par défaut) : Mais peuvent être forcés à prendre une largeur spécifique via width.
• Peuvent contenir d'autres éléments block et inline : Ils sont souvent utilisés comme des "cartes" ou des "tuiles" dans un design.

Quand utiliser display: inline-block ?

inline-block est extrêmement utile pour les scénarios où vous voulez que des éléments soient côte à côte (comme inline), mais que vous ayez également un contrôle total sur leur dimensionnement et leur espacement (block).

Cas d'usage courants :

• Menus de navigation horizontaux : Chaque élément de menu (<li>) peut être inline-block pour être sur la même ligne et avoir des marges et un padding définis.
• Grilles d'éléments : Pour afficher des "cartes" de produits, des images ou des articles les uns à côté des autres sur plusieurs lignes.
• Éléments de formulaire : Pour aligner des labels et des champs.
• Icônes et texte : Pour aligner une icône à côté d'un texte et pouvoir contrôler la taille de l'icône.

Comparaison Récapitulative

| Caractéristique | display: block | display: inline | display: inline-block | | :------------------------ | :----------------------- | :-------------------------------- | :--------------------------- | | Nouvelle ligne ? | Oui | Non | Non | | Largeur par défaut ? | Toute la largeur parente | Seulement le contenu | Seulement le contenu | | width/height ? | Oui | Non (ignorées) | Oui | | margin-top/bottom ? | Oui | Non (ignorées) | Oui | | margin-left/right ? | Oui | Oui | Oui | | padding/border ? | Oui | Oui (peut affecter lignes adj.) | Oui | | Peut contenir block ? | Oui | Non (seulement inline ou texte) | Oui | | Utilisation typique | Sections, titres, paragraphes | Texte, liens, petites icônes | Menus, grilles, cartes |

Exemples Pratiques

Explorons ces concepts avec du code.

Exemple 1: Comportement par défaut et modification

Cet exemple montre le comportement par défaut de div (block) et span (inline), puis comment la propriété display peut être utilisée pour changer ce comportement.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comportement Display</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 20px;
        }
        .box {
            background-color: lightblue;
            border: 1px solid steelblue;
            padding: 10px;
            margin-bottom: 5px; /* Pour les exemples de block */
            text-align: center;
        }

        /* Styles pour les exemples */
        .block-default {
            background-color: #f0f8ff; /* AliceBlue */
            border-color: #6a5acd; /* SlateBlue */
        }
        .inline-default {
            background-color: #fff0f5; /* LavenderBlush */
            border-color: #ff69b4; /* HotPink */
            margin-right: 10px; /* Pour séparer les spans */
        }

        /* Modification du comportement */
        .div-as-inline {
            display: inline;
            background-color: #ffe4e1; /* MistyRose */
            border-color: #dc143c; /* Crimson */
            margin-right: 10px; /* Ajouté pour les voir séparés */
            /* width: 100px; height: 50px; /* Ces propriétés seraient ignorées ici */
        }
        .span-as-block {
            display: block;
            background-color: #f0fff0; /* Honeydew */
            border-color: #2e8b57; /* SeaGreen */
            width: 150px; /* Maintenant accepté */
            height: 50px; /* Maintenant accepté */
            margin: 10px 0; /* Maintenant accepté */
        }
        .mixed-inline-block {
            display: inline-block;
            background-color: #f5f5dc; /* Beige */
            border-color: #b8860b; /* DarkGoldenrod */
            width: 120px; /* Accepté */
            height: 80px; /* Accepté */
            margin: 10px; /* Accepté */
            vertical-align: top; /* Utile pour aligner des inline-block */
        }
    </style>
</head>
<body>

    <h1>Comportement par défaut des éléments</h1>

    <h3>`div` (display: block par défaut)</h3>
    <div class="box block-default">Je suis une DIV par défaut. Je prends toute la largeur.</div>
    <div class="box block-default">Même si je suis petite, je vais sur une nouvelle ligne.</div>

    <h3>`span` (display: inline par défaut)</h3>
    <p>Ceci est un paragraphe avec <span class="box inline-default">un SPAN</span> à l'intérieur.
    Un autre <span class="box inline-default">SPAN ici</span>. Ils restent sur la même ligne et on ne peut pas forcer leur largeur/hauteur.</p>

    <h1>Modification du comportement avec `display`</h1>

    <h3>`div` transformée en `inline` (`display: inline`)</h3>
    <p>Regardez ces DIVs maintenant transformées en éléments inline :
    <div class="box div-as-inline">DIV 1 (inline)</div>
    <div class="box div-as-inline">DIV 2 (inline)</div>
    <div class="box div-as-inline">DIV 3 (inline)</div>
    Elles s'affichent côte à côte et leurs `width`/`height` sont ignorées.</p>

    <h3>`span` transformée en `block` (`display: block`)</h3>
    <p>Ces SPANs se comportent maintenant comme des blocs :</p>
    <span class="box span-as-block">SPAN 1 (block)</span>
    <span class="box span-as-block">SPAN 2 (block)</span>
    <span class="box span-as-block">SPAN 3 (block)</span>
    Elles prennent une nouvelle ligne et acceptent `width`, `height`, et `margin` verticaux.

    <h3>Éléments `inline-block` (`display: inline-block`)</h3>
    <p>Ces éléments (initialement des DIVs ou SPANs, peu importe) sont des `inline-block` :</p>
    <div class="box mixed-inline-block">Élément 1</div>
    <div class="box mixed-inline-block">Élément 2</div>
    <div class="box mixed-inline-block">Élément 3 avec plus de texte pour voir l'effet</div>
    <div class="box mixed-inline-block">Élément 4</div>
    <p>Ils sont côte à côte mais acceptent `width`, `height` et toutes les marges. Utile pour les grilles ou les cartes.</p>

</body>
</html>

Explication du code :

• Nous définissons une classe .box pour donner un style visuel de base à tous nos éléments.
• Les sections "Comportement par défaut" illustrent que les div prennent toute la largeur et vont à la ligne, tandis que les span restent sur la même ligne et ignorent les tentatives de width/height.
• Les sections "Modification du comportement" démontrent comment display: inline sur une div la force à se comporter comme un span, et display: block sur un span la force à se comporter comme une div.
• Enfin, les éléments avec display: inline-block montrent qu'ils peuvent être côte à côte (comme inline) tout en ayant des dimensions et des marges complètes (comme block). Notez l'utilisation de vertical-align: top; qui est souvent nécessaire avec les inline-block pour un alignement vertical correct.

Conclusion

La propriété display est fondamentale pour le contrôle de la mise en page en CSS.

• Les éléments block sont pour les structures principales, occupant toute la largeur et allant à la ligne.
• Les éléments inline sont pour le contenu textuel, s'insérant dans le flux de la ligne sans dimensions fixes.
• Les éléments inline-block offrent le meilleur des deux mondes, permettant aux éléments d'être côte à côte tout en conservant toutes les propriétés de dimensionnement de la Box Model.

Maîtriser ces trois valeurs vous donnera une base solide pour construire des mises en page complexes et flexibles. N'oubliez pas que vous pouvez modifier le type d'affichage par défaut de n'importe quel élément HTML grâce à la propriété display. Continuez à pratiquer en expérimentant avec ces valeurs pour bien saisir leurs nuances.