1 files changed, 62 insertions, 0 deletions
diff --git a/files/fr/web/css/replaced_element/index.html b/files/fr/web/css/replaced_element/index.html
new file mode 100644
index 0000000000..eaa2f4d82a
--- /dev/null
+++ b/files/fr/web/css/replaced_element/index.html
@@ -0,0 +1,62 @@
+---
+title: Élément remplacé
+slug: Web/CSS/Élément_remplacé
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/Replaced_element
+---
+<div>{{CSSRef}}</div>
+
+<p>En CSS, un <strong>élément remplacé</strong> est un élément dont la représentation est en dehors du champ de CSS. Ce sont des objets externes dont la représentation sera indépendante de CSS.</p>
+
+<p>Autrement dit, ces éléments sont des éléments dont le contenu n'est pas impacté par les styles du documents. La position de l'élément remplacé peut être modifiée avec CSS mais le contenu même de l'élément ne pourra pas être modifiée. Certains éléments remplacés comme {{HTMLElement("iframe")}} peuvent avoir leurs propres feuilles de styles mais ils n'héritent pas de celles du document parent.</p>
+
+<h2 id="Éléments_remplacés">Éléments remplacés</h2>
+
+<p>Les éléments remplacés caractéristiques sont :</p>
+
+<ul>
+ <li>{{HTMLElement("img")}},</li>
+ <li>{{HTMLElement("object")}},</li>
+ <li>{{HTMLElement("video")}},</li>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li>les éléments {{HTMLElement("input")}} de type image</li>
+</ul>
+
+<p>Par ailleurs, certains éléments comme :</p>
+
+<ul>
+ <li>{{HTMLElement("option")}}</li>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("canvas")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("applet")}}</li>
+</ul>
+
+<p>sont des éléments remplacés dans certains cas spécifiques. De même un élément {{HTMLElement("input")}} peut être un élément remplacé dans certains cas (lorsqu'il est de type <code>"image"</code> notamment).</p>
+
+<p>Les objets insérés grâce aux propriétés CSS {{cssxref("content")}} sont des <em>éléments remplacés anonymes</em> (on les qualifie d'anonymes car ils n'existent pas dans la structure du HTML).</p>
+
+<h2 id="Utiliser_CSS_avec_les_éléments_remplacés">Utiliser CSS avec les éléments remplacés</h2>
+
+<p>Les éléments remplacés sont manipulés de façon spécifique par le moteur CSS, notamment pour le calcul des marges extérieures et certaines valeurs <code>auto</code>.</p>
+
+<p>On notera que certains éléments remplacés ont des dimensions intrinsèques ou une ligne de base définie, qui sont utilisées par des propriétés CSS comme {{cssxref("vertical-align")}}.</p>
+
+<h3 id="Contrôler_la_position_des_objets_au_sein_de_la_boîte_de_contenu">Contrôler la position des objets au sein de la boîte de contenu</h3>
+
+<p>Certaines propriétés CSS permet d'indiquer la façon dont l'objet contenu dans l'élément remplacé doit occuper la boîte de l'élément. Ces propriétés sont définies dans les spécifications {{SpecName("CSS3 Images")}} et {{SpecName("CSS4 Images")}} :</p>
+
+<dl>
+ <dt>{{cssxref("object-fit")}}</dt>
+ <dd>Indique la façon dont le contenu de l'élément remplacé doit s'inscrire dans la boîte de l'élément et comment il doit être redimensionné si besoin.</dd>
+ <dt>{{cssxref("object-position")}}</dt>
+ <dd>Indique l'alignement du contenu de l'élément remplacé dans la boîte de l'élément.</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements">Spécification HTML sur les éléments remplacés</a></li>
+</ul>