Disposition en bloc et en ligne dans le flux normal

Les éléments qui participent à un contexte de formatage de bloc

Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.

Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.

Dans ce guide, nous allons travailler en français et donc un mode d'écriture horizontal. Cependant, tout ce qui est décrit ici doit fonctionner de la même manière si votre document est en mode d'écriture vertical.

Comme le définit la spécification, ce sont les marges entre deux blocs qui créent la séparation entre les éléments. On peut le constater avec la mise en page de deux paragraphes, auxquels j'ai ajouté une bordure. La feuille de style par défaut du navigateur ajoute un espacement entre les paragraphes en ajoutant une marge en haut et en bas.

<div class="boite">
  <p>
    Une nuit de novembre de l'année 1782, selon l'histoire, deux frères étaient
    assis près de leur feu d'hiver dans la petite ville française d'Annonay,
    regardant les volutes de fumée grise s'élever de l'âtre et se courber dans
    la large cheminée. Leurs noms étaient Stephen et Joseph Montgolfier, ils
    étaient papetiers de métier, et étaient connus pour posséder des esprits
    réfléchis et un profond intérêt pour toutes les connaissances scientifiques
    et les nouvelles découvertes.
  </p>
  <p>
    Avant cette nuit—une nuit mémorable, comme elle allait le prouver—des
    centaines de millions de personnes avaient regardé les volutes de fumée
    s'élever de leurs feux sans en tirer une inspiration particulière.
  </p>
</div>

p {
  border: 2px solid green;
}

Si on définit les marges de l'élément de paragraphe sur 0 alors les bordures se touchent.

<div class="boite">
  <p>
    Une nuit de novembre de l'année 1782, selon l'histoire, deux frères étaient
    assis près de leur feu d'hiver dans la petite ville française d'Annonay,
    regardant les volutes de fumée grise s'élever de l'âtre et se courber dans
    la large cheminée. Leurs noms étaient Stephen et Joseph Montgolfier, ils
    étaient papetiers de métier, et étaient connus pour posséder des esprits
    réfléchis et un profond intérêt pour toutes les connaissances scientifiques
    et les nouvelles découvertes.
  </p>
  <p>
    Avant cette nuit—une nuit mémorable, comme elle allait le prouver—des
    centaines de millions de personnes avaient regardé les volutes de fumée
    s'élever de leurs feux sans en tirer une inspiration particulière.
  </p>
</div>

p {
  border: 2px solid green;
  margin: 0;
}

Les éléments de bloc occupent par défaut tout l'espace disponible dans le sens de l'alignement, ce qui fait que nos paragraphes s'étendent et prennent toute la place possible à l'intérieur de leur bloc conteneur. Si nous leur attribuons une largeur, ils continuent à s'afficher les uns en dessous des autres, même s'il y a suffisamment d'espace pour qu'ils soient côte à côte. Chacun d'entre eux commence au bord de départ du bloc conteneur, c'est-à-dire à l'endroit où les phrases commencent dans ce mode d'écriture.

<div class="boite">
  <p>
    Une nuit de novembre de l'année 1782, selon l'histoire, deux frères étaient
    assis près de leur feu d'hiver dans la petite ville française d'Annonay,
    regardant les volutes de fumée grise s'élever de l'âtre et se courber dans
    la large cheminée. Leurs noms étaient Stephen et Joseph Montgolfier, ils
    étaient papetiers de métier, et étaient connus pour posséder des esprits
    réfléchis et un profond intérêt pour toutes les connaissances scientifiques
    et les nouvelles découvertes.
  </p>
  <p>
    Avant cette nuit—une nuit mémorable, comme elle allait le prouver—des
    centaines de millions de personnes avaient regardé les volutes de fumée
    s'élever de leurs feux sans en tirer une inspiration particulière.
  </p>
</div>

p {
  border: 2px solid green;
  width: 40%;
}

La fusion des marges

La spécification indique que les marges verticales entre chaque éléments de bloc fusionnent. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on a une fusion des marges et c'est uniquement la plus grande des marges qui est appliquée.

Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20px et une marge en bas qui mesure 40px. La taille de la marge entre les deux paragraphes est donc de 40px, car la plus petite est fusionnée avec la plus grande.

<div class="boite">
  <p>
    Une nuit de novembre de l'année 1782, selon l'histoire, deux frères étaient
    assis près de leur feu d'hiver dans la petite ville française d'Annonay,
    regardant les volutes de fumée grise s'élever de l'âtre et se courber dans
    la large cheminée. Leurs noms étaient Stephen et Joseph Montgolfier, ils
    étaient papetiers de métier, et étaient connus pour posséder des esprits
    réfléchis et un profond intérêt pour toutes les connaissances scientifiques
    et les nouvelles découvertes.
  </p>
  <p>
    Avant cette nuit—une nuit mémorable, comme elle allait le prouver—des
    centaines de millions de personnes avaient regardé les volutes de fumée
    s'élever de leurs feux sans en tirer une inspiration particulière.
  </p>
</div>

p {
  border: 2px solid green;
  margin: 20px 0 40px 0;
}

Pour en savoir plus à propos de la fusion des marges, vous pouvez lire l'article dédié à la fusion des marges.

Les éléments qui participent à un contexte de formatage en ligne

Les éléments en ligne s'affichent les uns à la suite des autres, dans le sens de lecture des phrases selon le mode d'écriture utilisé. Même si l'on a tendance à ne pas considérer les éléments en ligne comme possédant une boîte, comme tout ce qui relève du CSS, c'est pourtant le cas. Ces boîtes en ligne sont disposées les unes à la suite des autres. S'il n'y a pas suffisamment d'espace dans le bloc conteneur pour accueillir toutes les boîtes, une boîte peut s'étendre sur une nouvelle ligne. Les lignes ainsi créées sont appelées boîtes de ligne.

Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément <strong> à l'intérieur.

<p>
  Avant cette nuit-là — <strong>une nuit mémorable</strong>, comme on venait de
  le constater — des centaines de millions de personnes avaient observé les
  volutes de fumée s'élevant de leurs feux sans que cela ne leur inspire quoi
  que ce soit de particulier.
</p>

Les boîtes entourant les mots situés avant l'élément <strong> et après l'élément </strong> sont appelées des boîtes anonymes, des boîtes introduites pour garantir que tout soit contenu dans une boîte, mais que l'on ne peut pas cibler directement.

La taille de la boîte de ligne dans le sens du bloc (c'est-à-dire la hauteur lorsque l'on travaille en français) est définie par la boîte la plus haute qu'elle contient. Dans l'exemple suivant, l'élément <strong> mesure 300% ; comme ce contenu s'étend sur deux lignes, il définit désormais la hauteur des boîtes de ligne de ces deux lignes.

<p>
  Avant cette nuit-là — <strong>une nuit mémorable</strong>, comme on venait de
  le constater — des centaines de millions de personnes avaient observé les
  volutes de fumée s'élevant de leurs feux sans que cela ne leur inspire quoi
  que ce soit de particulier.
</p>

strong {
  font-size: 300%;
}

Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter le guide sur le modèle de formatage visuel.

La propriété display et la disposition de flux

En plus des règles existantes dans CSS2.1, de nouveaux niveaux de CSS décrivent davantage le comportement des boîtes de bloc et en ligne. La propriété display définit comment une boîte et toutes les boîtes qu'elle contient se comportent. Dans le CSS Display Model Level 3, nous pouvons en apprendre davantage sur la façon dont la propriété display modifie le comportement des boîtes et des boîtes qu'elles génèrent.

Le type d'affichage d'un élément définit le type d'affichage externe ; cela dicte comment la boîte s'affiche aux côtés des autres éléments dans le même contexte de formatage. Il définit également le type d'affichage interne, qui dicte comment les boîtes à l'intérieur de cet élément se comportent. Nous pouvons voir cela très clairement en considérant une disposition flexible. Dans l'exemple ci-dessous, on a un <div>, auquel on a donné display: flex. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et prend tout l'espace disponible dans la direction en ligne. C'est le type d'affichage externe de block.

Les éléments flexibles, en revanche, participent à un contexte de formatage flexible, car leur parent est l'élément avec display: flex, qui a un type d'affichage interne de flex, établissant le contexte de formatage flexible pour les enfants directs.

<div class="conteneur">
  <div>Élément flexible</div>
  <div>Élément flexible</div>
  <div>
    <div>Les enfants</div>
    <div>sont dans</div>
    <div>le flux normal</div>
  </div>
</div>

.conteneur {
  display: flex;
}

.conteneur > * {
  border: 1px solid green;
}

Vous pouvez donc considérer que chaque boîte en CSS fonctionne de cette manière. La boîte elle-même possède un type d'affichage externe, ce qui lui permet de savoir comment se comporter par rapport aux autres boîtes. Elle possède ensuite un type d'affichage interne qui modifie le comportement de ses enfants. Ces enfants possèdent eux aussi un type d'affichage externe et interne. Les éléments flexible de l'exemple précédent deviennent des boîtes de niveau flexible, leur type d'affichage externe est donc déterminé par leur appartenance au contexte de formatage flexible. Ils possèdent toutefois un type d'affichage interne de type flux, ce qui signifie que leurs enfants participent au flux normal. Les éléments imbriqués à l'intérieur de notre élément flexible s'affichent comme des éléments en bloc et en ligne, à moins qu'un élément ne modifie leur type d'affichage.

Ce concept de type d'affichage externe et interne est important, car il nous indique qu'un conteneur utilisant une méthode de mise en page telle que les boîtes flexibles (display: flex) ou les grilles (display: grid) participe toujours à la mise en page en bloc et en ligne, en raison du type d'affichage externe de ces méthodes étant block.

Modifier le contexte de formatage auquel un élément participe

Les navigateurs affichent les éléments en bloc ou en ligne en fonction de ce qui est normalement logique pour cet élément. Par exemple, un élément <strong> est utilisé pour mettre fortement en évidence un segment de contenu et est affiché en gras par défaut dans les navigateurs. Il n'est, généralement, pas logique que cet élément <strong> soit affiché comme un élément de niveau bloc, passant à une nouvelle ligne. Si vous souhaitez que tous les éléments <strong> soient affichés comme des boîtes de niveau bloc, vous pouvez le faire en définissant strong { display: block; }. La possibilité de mettre en forme le contenu avec CSS signifie que vous pouvez toujours utiliser les éléments HTML les plus sémantiques pour marquer votre contenu, puis modifier leur affichage avec CSS.

<p>
  Avant cette nuit-là — <strong>une nuit mémorable</strong>, comme on venait de
  le constater — des centaines de millions de personnes avaient observé les
  volutes de fumée s'élevant de leurs feux sans que cela ne leur inspire quoi
  que ce soit de particulier.
</p>

strong {
  display: block;
}

Résumé

Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'affichent par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprenez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.

Voir aussi

• Le modèle de boîte CSS de base
• Apprendre : le flux normal
• Les éléments HTML en ligne
• Les éléments HTML de bloc