From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../web/css/inline_formatting_context/index.html | 63 ++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 files/fr/web/css/inline_formatting_context/index.html (limited to 'files/fr/web/css/inline_formatting_context') diff --git a/files/fr/web/css/inline_formatting_context/index.html b/files/fr/web/css/inline_formatting_context/index.html new file mode 100644 index 0000000000..bb40bcce6d --- /dev/null +++ b/files/fr/web/css/inline_formatting_context/index.html @@ -0,0 +1,63 @@ +--- +title: Contexte de formatage en ligne (inline/incise) +slug: Web/CSS/Contexte_de_formatage_en_ligne +tags: + - CSS + - Guide +translation_of: Web/CSS/Inline_formatting_context +--- +

{{CSSRef}}

+ +

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é :

+ + + +

Dans l'exemple qui suit, on a deux éléments ({{HTMLElement("div")}}) avec une bordure noire qui forment chacuns un 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.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}

+ +

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 ({{HTMLElement("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.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}

+ +

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é.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}

+ +
+

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. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-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, voir les 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é {{cssxref("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 utiliser vertical-align afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeur top mais vous pouvez le modifier en utilisant middle, bottom ou encore baseline.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}

+ +

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é {{cssxref("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 de text-align afin d'utiliser end.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}

+ +

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 ({{cssxref("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.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf