Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Contexte de formatage en ligne (inline/incise)
Dans cet article, nous allons voir ce qu'est le contexte de formatage en ligne (inline formatting context).
Concepts-clés
Le contexte de formatage en ligne est une des méthodes permettant de créer le rendu visuel d'une page web. Les boîtes en ligne sont disposées les unes après les autres selon le mode d'écriture utilisé :
- Pour un mode d'écriture horizontal, les boîtes en ligne sont disposées horizontalement de la gauche vers la droite.
- Pour une mode d'écriture vertical, les boîtes en lignes sont disposées verticalement du haut vers le bas.
Dans l'exemple qui suit, on a deux éléments (<div>) avec une bordure noire qui forment chacunsun contexte de formatage de bloc au sein duquel chaque mot contribue à un contexte de formatage en ligne. Les boîtes utilisées dans le mode d'écriture horizontal sont organisées horizontalement tandis que celles dans l'élément avec un mode d'écriture vertical sont disposées verticalement.
Les boîtes qui forment une ligne sont contenues dans une zone rectangulaire qu'on appelle boîte de ligne (line box). Cette boîte sera assez grande pour contenir l'ensemble des boîtes en ligne de cette ligne. Lorsqu'il n'y a plus de place disponible sur l'axe en ligne, une autre ligne est créée. Ainsi, un paragraphe est formé par un ensemble de boîtes de ligne, empilées le long de l'axe de bloc.
Lorsqu'une boîte en ligne est découpée en deux, les marges, bordures et le remplissage (padding) n'ont pas d'impact visuel à l'emplacement de la séparation. Dans le prochain exemple, on peut voir un élément (<span>) enveloppant un ensemble de mots s'étirant sur deux lignes. On voit que la bordure sur<span> est coupée au passage à la ligne.
Les marges, les bordures et le remplissage (padding) le long de la direction en ligne sont respectés. Dans l'exemple suivant, on peut voir comment sont ajoutés les marges, bordures et le remplissage à l'élément en ligne<span> qui a été ajouté.
Note :Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex.padding-inline-start plutôt quepadding-left) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voirles propriétés et les valeurs logiques en CSS.
Alignement sur la direction de bloc (block)
Les boîtes en ligne peuvent être alignées sur la direction de bloc de différentes façons avec la propriétévertical-align. Celle-ci permettra d'aligner le contenu sur l'axe de bloc (lorsque le mode d'écriture est vertical,vertical-align ne permet pas d'aligner sur l'axe vertical !). Dans l'exemple qui suit, une portion de texte plus grande rend la boîte de ligne plus grande pour la première phrase. On peut alors utiliservertical-align afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeurtop mais vous pouvez le modifier en utilisantmiddle,bottom ou encorebaseline.
Alignement le long de la direction en ligne (inline)
S'il reste de l'espace le long de la direction en ligne, la propriététext-align permetra d'aligner le contenu des boîtes en lignes au sein des boîtes de ligne. Dans l'exemple qui suit, vous pouvez notamment changer la valeur detext-align afin d'utiliserend.
Effets du flottement (float)
Les boîtes de ligne ont généralement la même taille sur l'axe en ligne (c'est-à-dire la même largeur quand on utilise un mode d'écriture horizontal ou la même hauteur si on utilise un mode d'écriture vertical). S'il existe un élément flottant (float) au sein du même contexte de formatage de bloc, cet élément entraînera la diminution de la taille des boîtes de ligne pour celles qui entourent l'élément flottant.