1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
---
title: Contexte de formatage en ligne (inline/incise)
slug: Web/CSS/Inline_formatting_context
tags:
- CSS
- Guide
translation_of: Web/CSS/Inline_formatting_context
original_slug: Web/CSS/Contexte_de_formatage_en_ligne
---
<p>{{CSSRef}}</p>
<p>Dans cet article, nous allons voir ce qu'est le contexte de formatage en ligne (<em>inline formatting context</em>).</p>
<h2 id="Concepts-clés">Concepts-clés</h2>
<p>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é :</p>
<ul>
<li>Pour un mode d'écriture horizontal, les boîtes en ligne sont disposées horizontalement de la gauche vers la droite.</li>
<li>Pour une mode d'écriture vertical, les boîtes en lignes sont disposées verticalement du haut vers le bas.</li>
</ul>
<p>Dans l'exemple qui suit, on a deux éléments ({{HTMLElement("div")}}) avec une bordure noire qui forment chacuns <a href="/fr/docs/Web/CSS/Block_formatting_context">un contexte de formatage de bloc</a> 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.</p>
<p>{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}</p>
<p>Les boîtes qui forment une ligne sont contenues dans une zone rectangulaire qu'on appelle boîte de ligne (<em>line box</em>). 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.</p>
<p>Lorsqu'une boîte en ligne est découpée en deux, les marges, bordures et le remplissage (<em>padding</em>) 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 <code><span></code> est coupée au passage à la ligne.</p>
<p>{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}</p>
<p>Les marges, les bordures et le remplissage (<em>padding</em>) 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 <code><span></code> qui a été ajouté.</p>
<p>{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}</p>
<div class="note">
<p><strong>Note :</strong> 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 <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">les propriétés et les valeurs logiques en CSS</a>.</p>
</div>
<h2 id="Alignement_sur_la_direction_de_bloc_block">Alignement sur la direction de bloc (<em>block</em>)</h2>
<p>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, <code>vertical-align</code> 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 <code>vertical-align</code> afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeur <code>top</code> mais vous pouvez le modifier en utilisant <code>middle</code>, <code>bottom</code> ou encore <code>baseline</code>.</p>
<p>{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}</p>
<h2 id="Alignement_le_long_de_la_direction_en_ligne_inline">Alignement le long de la direction en ligne (<em>inline</em>)</h2>
<p>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 <code>text-align</code> afin d'utiliser <code>end</code>.</p>
<p>{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}</p>
<h2 id="Effets_du_flottement_float">Effets du flottement (<code>float</code>)</h2>
<p>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.</p>
<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/CSS/Block_formatting_context">Le contexte de formatage en bloc</a></li>
<li><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Le modèle de formatage visuel</a></li>
</ul>
|
