convert content to md

2 files changed, 112 insertions, 157 deletions

diff --git a/files/fr/web/css/css_box_model/index.md b/files/fr/web/css/css_box_model/index.md
index 61ad9dfd61..7dbf6c1104 100644
--- a/files/fr/web/css/css_box_model/index.md
+++ b/files/fr/web/css/css_box_model/index.md
@@ -10,97 +10,64 @@ tags:
 translation_of: Web/CSS/CSS_Box_Model
 original_slug: Web/CSS/Modèle_de_boîte_CSS
 ---
-<div>{{CSSRef}}</div>
-
-<p><strong>Le modèle de boîte CSS</strong> (<em>Basic Box Model</em> en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (<em>padding</em>) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<h4 id="Les_propriétés_qui_définissent_le_flux_du_contenu_dans_une_boîte">Les propriétés qui définissent le flux du contenu dans une boîte</h4>
-
-<ul>
- <li>{{cssxref("overflow")}}</li>
- <li>{{cssxref("overflow-x")}}</li>
- <li>{{cssxref("overflow-y")}}</li>
-</ul>
-
-<h4 id="Les_propriétés_qui_définissent_la_taille_d'une_boîte">Les propriétés qui définissent la taille d'une boîte</h4>
-
-<ul>
- <li>{{cssxref("height")}}</li>
- <li>{{cssxref("width")}}</li>
- <li>{{cssxref("max-height")}}</li>
- <li>{{cssxref("max-width")}}</li>
- <li>{{cssxref("min-height")}}</li>
- <li>{{cssxref("min-width")}}</li>
-</ul>
-
-<h4 id="Les_propriétés_qui_définissent_les_marges_d'une_boîte">Les propriétés qui définissent les marges d'une boîte</h4>
-
-<ul>
- <li>{{cssxref("margin")}}</li>
- <li>{{cssxref("margin-bottom")}}</li>
- <li>{{cssxref("margin-left")}}</li>
- <li>{{cssxref("margin-right")}}</li>
- <li>{{cssxref("margin-top")}}</li>
- <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li>
-</ul>
-
-<h4 id="Les_propriétés_qui_définissent_le_remplissage_(padding)_d'une_boîte">Les propriétés qui définissent le remplissage (<em>padding</em>) d'une boîte</h4>
-
-<ul>
- <li>{{cssxref("padding")}}</li>
- <li>{{cssxref("padding-bottom")}}</li>
- <li>{{cssxref("padding-left")}}</li>
- <li>{{cssxref("padding-right")}}</li>
- <li>{{cssxref("padding-top")}}</li>
-</ul>
-
-<h4 id="Les_autres_propriétés">Les autres propriétés</h4>
-
-<ul>
- <li>{{cssxref("box-shadow")}}</li>
- <li>{{cssxref("visibility")}}</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Une introduction au modèle de boîte CSS</a></dt>
- <dd>Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (<em>padding</em>) ainsi que les différentes zones qui forment une boîte.</dd>
- <dt><a href="/fr/docs/Web/CSS/Fusion_des_marges">Maîtriser la fusion des marges</a></dt>
- <dd>Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.</dd>
- <dt><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Le modèle de mise en forme visuel</a></dt>
- <dd>Cet article explique le modèle de mise en forme visuel.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box")}}</td>
-   <td>{{Spec2("CSS3 Box")}}</td>
-   <td>Added <code>margin-trim</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "box.html")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+{{CSSRef}}
+
+**Le modèle de boîte CSS** (_Basic Box Model_ en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (_padding_) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.
+
+## Référence
+
+### Propriétés
+
+#### Les propriétés qui définissent le flux du contenu dans une boîte
+
+- {{cssxref("overflow")}}
+- {{cssxref("overflow-x")}}
+- {{cssxref("overflow-y")}}
+
+#### Les propriétés qui définissent la taille d'une boîte
+
+- {{cssxref("height")}}
+- {{cssxref("width")}}
+- {{cssxref("max-height")}}
+- {{cssxref("max-width")}}
+- {{cssxref("min-height")}}
+- {{cssxref("min-width")}}
+
+#### Les propriétés qui définissent les marges d'une boîte
+
+- {{cssxref("margin")}}
+- {{cssxref("margin-bottom")}}
+- {{cssxref("margin-left")}}
+- {{cssxref("margin-right")}}
+- {{cssxref("margin-top")}}
+- {{CSSxRef("margin-trim")}} {{Experimental_Inline}}
+
+#### Les propriétés qui définissent le remplissage (_padding_) d'une boîte
+
+- {{cssxref("padding")}}
+- {{cssxref("padding-bottom")}}
+- {{cssxref("padding-left")}}
+- {{cssxref("padding-right")}}
+- {{cssxref("padding-top")}}
+
+#### Les autres propriétés
+
+- {{cssxref("box-shadow")}}
+- {{cssxref("visibility")}}
+
+## Guides
+
+- [Une introduction au modèle de boîte CSS](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte)
+  - : Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (_padding_) ainsi que les différentes zones qui forment une boîte.
+- [Maîtriser la fusion des marges](/fr/docs/Web/CSS/Fusion_des_marges)
+  - : Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.
+- [Le modèle de mise en forme visuel](/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle)
+  - : Cet article explique le modèle de mise en forme visuel.
+
+## Spécifications
+
+| Spécification                                | État                         | Commentaires         |
+| -------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Box")}}             | {{Spec2("CSS3 Box")}} | Added `margin-trim`  |
+| {{SpecName("CSS2.1", "box.html")}} | {{Spec2("CSS2.1")}}     |                      |
+| {{SpecName("CSS1")}}                 | {{Spec2("CSS1")}}     | Définition initiale. |
diff --git a/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md
index ec87b13973..7b43810ae6 100644
--- a/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md
+++ b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.md
@@ -7,53 +7,55 @@ tags:
 translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
 original_slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}Les marges [haute](/fr/docs/Web/CSS/margin-top) et [basse](/fr/docs/Web/CSS/margin-bottom) des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle **la fusion des marges**.
 
-<div>Les marges <a href="/fr/docs/Web/CSS/margin-top">haute</a> et <a href="/fr/docs/Web/CSS/margin-bottom">basse</a> des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle <strong>la fusion des marges</strong>.</div>
+La fusion des marges se produit si on a l'un de ces trois cas :
 
-<p>La fusion des marges se produit si on a l'un de ces trois cas :</p>
+- Des éléments voisins adjacents
 
-<dl>
- <dt>Des éléments voisins adjacents</dt>
- <dd>Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour <a href="/fr/docs/Web/CSS/clear">dégager</a> les flottements). Ainsi :
- <pre class="brush: html"> &lt;p&gt;La marge basse de ce paragraphe est fusionnée…&lt;/p&gt;
- &lt;p&gt;… avec la marge haute de celui-ci.&lt;/p&gt;
-</pre>
- </dd>
- <dt>Aucun contenu séparant le parent et ses descendants</dt>
- <dd>S'il n'y a aucune bordure, remplissage, contenu en ligne (<em>inline</em>), lorsqu' un <a href="/fr/docs/Web/CSS/Block_formatting_context"> contexte de formatage de blocs </a> est créé ou <em><a href="/fr/docs/Web/CSS/clear">dégagement</a></em> pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.</dd>
- <dt>Des blocs vides</dt>
- <dd>S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.</dd>
-</dl>
+  - : Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour [dégager](/fr/docs/Web/CSS/clear) les flottements). Ainsi :
 
-<p>On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.</p>
+    ```html
+     <p>La marge basse de ce paragraphe est fusionnée…</p>
+     <p>… avec la marge haute de celui-ci.</p>
+    ```
 
-<p>Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).</p>
+- Aucun contenu séparant le parent et ses descendants
+  - : S'il n'y a aucune bordure, remplissage, contenu en ligne (_inline_), lorsqu' un [contexte de formatage de blocs ](/fr/docs/Web/CSS/Block_formatting_context)est créé ou _[dégagement](/fr/docs/Web/CSS/clear)_ pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.
+- Des blocs vides
+  - : S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.
 
-<p>Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).</p>
+On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.
 
-<p>Les marges des éléments <a href="/fr/docs/Web/CSS/float">flottants</a> et <a href="/fr/docs/Web/CSS/position">positionnés de façon absolue</a> ne sont jamais fusionnées.</p>
+Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).
 
-<h2 id="Exemples">Exemples</h2>
+Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).
 
-<h3 id="HTML">HTML</h3>
+Les marges des éléments [flottants](/fr/docs/Web/CSS/float) et [positionnés de façon absolue](/fr/docs/Web/CSS/position) ne sont jamais fusionnées.
 
-<pre class="brush: html">&lt;p&gt;La marge basse de ce paragraphe est fusionnée…&lt;/p&gt;
-&lt;p&gt;… avec la marge haute de ce paragraphe. On a donc une marge
-   de &lt;code&gt;1.2rem&lt;/code&gt; entre les deux.&lt;/p&gt;
+## Exemples
 
-&lt;div&gt;Cet élément contient deux paragraphes !
-  &lt;p&gt;Celui-ci a une marge de &lt;code&gt;.4rem&lt;/code&gt; par rapport au texte ci-dessus.&lt;/p&gt;
-  &lt;p&gt;La marge basse de cet élément fusionne avec la marge basse
-     de l'élément parent. On a donc &lt;code&gt;2rem&lt;/code&gt; de marge.
-&lt;/p&gt;
-&lt;/div&gt;
+### HTML
 
-&lt;p&gt;Bip bap bop.&lt;/p&gt;</pre>
+```html
+<p>La marge basse de ce paragraphe est fusionnée…</p>
+<p>… avec la marge haute de ce paragraphe. On a donc une marge
+   de <code>1.2rem</code> entre les deux.</p>
 
-<h3 id="CSS">CSS</h3>
+<div>Cet élément contient deux paragraphes !
+  <p>Celui-ci a une marge de <code>.4rem</code> par rapport au texte ci-dessus.</p>
+  <p>La marge basse de cet élément fusionne avec la marge basse
+     de l'élément parent. On a donc <code>2rem</code> de marge.
+</p>
+</div>
 
-<pre class="brush: css">div {
+<p>Bip bap bop.</p>
+```
+
+### CSS
+
+```css
+div {
   margin: 2rem 0;
   background: lavender;
 }
@@ -61,33 +63,19 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges
 p {
   margin: .4rem 0 1.2rem 0;
   background: yellow;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples','100%',250)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples','100%',250)}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ------------------------ | -------------------- |
+| {{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}} | {{Spec2("CSS2.1")}} | Définition initiale. |
+
+## Voir aussi
+
+- [La référence CSS](/fr/docs/Web/CSS/Reference)