convert content to md

5 files changed, 377 insertions, 633 deletions

diff --git a/files/fr/web/css/css_logical_properties/basic_concepts/index.md b/files/fr/web/css/css_logical_properties/basic_concepts/index.md
index 82079917e4..0cb1ef181d 100644
--- a/files/fr/web/css/css_logical_properties/basic_concepts/index.md
+++ b/files/fr/web/css/css_logical_properties/basic_concepts/index.md
@@ -8,69 +8,65 @@ tags:
 translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts
 original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.</p>
+La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.
 
-<h2 id="Quel_intérêt_pour_les_propriétés_logiques">Quel intérêt pour les propriétés logiques ?</h2>
+## Quel intérêt pour les propriétés logiques ?
 
-<p>Historiquement, CSS permettait de dimensionner des objets selon les dimensions physiques de l'écran. On pouvait alors décrire des boîtes avec une certaine largeur ({{CSSxRef("width")}}) et une certaine hauteur ({{CSSxRef("height")}}), positionner les éléments à partir du haut (<code>top</code>) et de la gauche (<code>left</code>), faire flotter les objets, créer des bordures, des marges, du remplissage (<em>padding</em>) en haut, à droite, en bas et à gauche (resp. <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, etc.). La spécification <a href="https://drafts.csswg.org/css-logical/">sur les propriétés et valeurs logiques</a> définit des correspondances entres ces valeurs physiques et des valeurs logiques, relatives au flux : <code>start</code> et <code>end</code> plutôt que <code>left</code> et <code>right</code> ou <code>top</code> et <code>bottom</code>.</p>
+Historiquement, CSS permettait de dimensionner des objets selon les dimensions physiques de l'écran. On pouvait alors décrire des boîtes avec une certaine largeur ({{CSSxRef("width")}}) et une certaine hauteur ({{CSSxRef("height")}}), positionner les éléments à partir du haut (`top`) et de la gauche (`left`), faire flotter les objets, créer des bordures, des marges, du remplissage (_padding_) en haut, à droite, en bas et à gauche (resp. `top`, `right`, `bottom`, `left`, etc.). La spécification [sur les propriétés et valeurs logiques](https://drafts.csswg.org/css-logical/) définit des correspondances entres ces valeurs physiques et des valeurs logiques, relatives au flux : `start` et `end` plutôt que `left` et `right` ou `top` et `bottom`.
 
-<p>Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : <code>justify-self: start</code> aligne l'élément au début de l'axe en ligne et <code>align-self: start</code> aligne l'élément au début de l'axe de bloc.</p>
+Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : `justify-self: start` aligne l'élément au début de l'axe en ligne et `align-self: start` aligne l'élément au début de l'axe de bloc.
 
-<p><img alt="A grid in a horizontal writing mode" src="grid-horizontal-width-sm.png"></p>
+![A grid in a horizontal writing mode](grid-horizontal-width-sm.png)
 
-<p>Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur <code>vertical-rl</code>, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.</p>
+Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur `vertical-rl`, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.
 
-<p><img alt="A grid in vertical writing mode." src="grid-vertical-width-sm.png"></p>
+![A grid in vertical writing mode.](grid-vertical-width-sm.png)
 
-<p>Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que <code>width</code>, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.</p>
+Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que `width`, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.
 
-<p><img alt="A grid layout in vertical writing mode" src="grid-vertical-inline-size-small.png"></p>
+![A grid layout in vertical writing mode](grid-vertical-inline-size-small.png)
 
-<p>Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété <code>writing-mode</code> pour la passer de <code>vertical-rl</code> à <code>horizontal-tb</code> sur le sélecteur <code>.box</code> afin d'observer la façon dont les différentes propriétés modifient la disposition.</p>
+Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété `writing-mode` pour la passer de `vertical-rl` à `horizontal-tb` sur le sélecteur `.box` afin d'observer la façon dont les différentes propriétés modifient la disposition.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}
 
-<p>Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.</p>
+Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.
 
-<h2 id="Axe_de_bloc_et_axe_en_ligne">Axe de bloc et axe en ligne</h2>
+## Axe de bloc et axe en ligne
 
-<p>Lorsqu'on travaille avec les propriétés et les valeurs logiques, il y a deux concepts majeurs : l'axe de bloc et l'axe en ligne qui sont les deux dimensions de l'espace. Comme nous l'avons vu avant, les nouvelles méthodes de disposition CSS (comme les boîtes flexibles et les grilles CSS) utilisent les concepts de <code>block</code> et <code>inline</code> plutôt que <code>right</code> et <code>left</code>/<code>top</code> et <code>bottom</code> pour l'alignement des objets.</p>
+Lorsqu'on travaille avec les propriétés et les valeurs logiques, il y a deux concepts majeurs : l'axe de bloc et l'axe en ligne qui sont les deux dimensions de l'espace. Comme nous l'avons vu avant, les nouvelles méthodes de disposition CSS (comme les boîtes flexibles et les grilles CSS) utilisent les concepts de `block` et `inline` plutôt que `right` et `left`/`top` et `bottom` pour l'alignement des objets.
 
-<p>La dimension en ligne (<em>inline</em>) correspond à l'axe selon lequel les lignes de texte sont écrites pour ce mode d'écriture. Ainsi, pour un document français, le texte sera écrit horizontalement de gauche à droite et pour un document arabe écrit de droite à gauche, la dimension en ligne est l'axe horizontal. Si on utilise un mode d'écriture vertical (le japonais par exempl), la dimension en ligne sera verticale car les lignes de texte de ce mode sont écrites verticalement.</p>
+La dimension en ligne (_inline_) correspond à l'axe selon lequel les lignes de texte sont écrites pour ce mode d'écriture. Ainsi, pour un document français, le texte sera écrit horizontalement de gauche à droite et pour un document arabe écrit de droite à gauche, la dimension en ligne est l'axe horizontal. Si on utilise un mode d'écriture vertical (le japonais par exempl), la dimension en ligne sera verticale car les lignes de texte de ce mode sont écrites verticalement.
 
-<p>La dimension de bloc correspond à l'axe orthogonal et généralement à la direction selon laquelle les blocs de texte (les paragraphes) sont agencés. En français ou en arabe, cet axe est vertical, pour les modes d'écritures écrits verticalement, cet axe est horizontal.</p>
+La dimension de bloc correspond à l'axe orthogonal et généralement à la direction selon laquelle les blocs de texte (les paragraphes) sont agencés. En français ou en arabe, cet axe est vertical, pour les modes d'écritures écrits verticalement, cet axe est horizontal.
 
-<p>Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :</p>
+Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :
 
-<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="mdn-horizontal.png"></p>
+![diagram showing the inline axis running horizontally, block axis vertically.](mdn-horizontal.png)
 
-<p>Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :</p>
+Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :
 
-<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="mdn-vertical.png"></p>
+![Diagram showing the block axis running horizontally the inline axis vertically.](mdn-vertical.png)
 
-<h2 id="Prise_en_charge_des_navigateurs">Prise en charge des navigateurs</h2>
+## Prise en charge des navigateurs
 
-<p>Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties#reference">de référence pour ces propriétés sur MDN</a>, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).</p>
+Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages [de référence pour ces propriétés sur MDN](/en-US/docs/Web/CSS/CSS_Logical_Properties#reference), seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).
 
-<p>On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.</p>
+On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.
 
-<div class="note">
-<p><strong>Note :</strong> Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom <code>margin</code> pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'<em>issue</em> GitHub <a href="https://github.com/w3c/csswg-drafts/issues/1282">n°1282</a>.</p>
-</div>
+> **Note :** Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom `margin` pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'_issue_ GitHub [n°1282](https://github.com/w3c/csswg-drafts/issues/1282).
 
-<h3 id="Tester_la_compatibilité_des_navigateurs">Tester la compatibilité des navigateurs</h3>
+### Tester la compatibilité des navigateurs
 
-<p>Il est possible de tester la prise en charge des propriétés et valeurs logiques en utilisant une requête de fonctionnalité (<code>@supports</code>). Ainsi, on pourrait définit une propriété {{CSSxRef("width")}}, tester si {{CSSxRef("inline-size")}} est prise en charge et, le cas échéant, définir <code>width</code> avec <code>auto</code> et <code>inline-size</code> avec la valeur initialement utilisée pour <code>width</code>.</p>
+Il est possible de tester la prise en charge des propriétés et valeurs logiques en utilisant une requête de fonctionnalité (`@supports`). Ainsi, on pourrait définit une propriété {{CSSxRef("width")}}, tester si {{CSSxRef("inline-size")}} est prise en charge et, le cas échéant, définir `width` avec `auto` et `inline-size` avec la valeur initialement utilisée pour `width`.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">L'alignement des boîtes pour une disposition en grille</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes pour une disposition flexible</a></li>
- <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Comprendre les propriétés et les valeurs logiques</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Les modes d'écriture</a></li>
-</ul>
+- [L'alignement des boîtes pour une disposition en grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
+- [L'alignement des boîtes pour une disposition flexible](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox)
+- [Comprendre les propriétés et les valeurs logiques](https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/)
+- [Les modes d'écriture](/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes)
diff --git a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.md b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.md
index e7105dad8a..d32d4de0f2 100644
--- a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.md
+++ b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.md
@@ -8,137 +8,76 @@ tags:
 translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
 original_slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement
 ---
-<div>{{CSSRef}}</div>
-
-<p><a href="https://drafts.csswg.org/css-logical/">La spécification sur les propriétés et valeurs logiques</a> définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une <a href="/fr/docs/Web/CSS/CSS_Positioning">disposition positionnée</a>. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.</p>
-
-<h2 id="Correspondance_entre_les_propriétés_et_les_valeurs">Correspondance entre les propriétés et les valeurs</h2>
-
-<p>Le tableau ci-après définit les propriétés et les valeurs que nous verrons dans ce guide et la correspondance avec les propriétés et valeurs physiques si on utilisait un mode d'écriture horizontal allant de gauche à droite.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété ou valeur logique</th>
-   <th scope="col">Propriété ou valeur physique</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{cssxref("float")}}<code>: inline-start</code></td>
-   <td>{{cssxref("float")}}<code>: left</code></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("float")}}<code>: inline-end</code></td>
-   <td>{{cssxref("float")}}<code>: right</code></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("clear")}}<code>: inline-start</code></td>
-   <td>{{cssxref("clear")}}<code>: left</code></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("clear")}}<code>: inline-end</code></td>
-   <td>{{cssxref("clear")}}<code>: right</code></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("inset-inline-start")}}</td>
-   <td>{{cssxref("left")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("inset-inline-end")}}</td>
-   <td>{{cssxref("right")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("inset-block-start")}}</td>
-   <td>{{cssxref("top")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("inset-block-end")}}</td>
-   <td>{{cssxref("bottom")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("text-align")}}<code>: start</code></td>
-   <td>{{cssxref("text-align")}}<code>: left</code></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("text-align")}}<code>: end</code></td>
-   <td>{{cssxref("text-align")}}<code>: right</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>En plus de ces correspondances, certaines propriétés logiques raccourcies ont été ajoutées. Pour celles-ci, qui ciblent les extrêmités des axes en ligne ou de bloc, il n'y a pas de correspondance avec des propriétés physiques existantes à l'exception de {{cssxref("inset")}}.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété logique</th>
-   <th scope="col">Objectif</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{cssxref("inset-inline")}}</td>
-   <td>Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("inset-block")}}</td>
-   <td>Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("inset")}}</td>
-   <td>Cette propriété définit les valeurs des quatre décalages.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple_d'un_flottement_et_d'un_dégagement">Exemple d'un flottement et d'un dégagement</h2>
-
-<p>Les valeurs physiques utilisées avec les propriétés {{cssxref("float")}} et {{cssxref("clear")}} sont <code>left</code>, <code>right</code> et <code>both</code>. Les valeurs logiques définies par la spécification sont <code>inline-start</code> et <code>inline-end</code> et qui peuvent correspondre à <code>left</code> et <code>right</code> selon le mode d'écriture.</p>
-
-<p>Dans l'exemple ci-après, on a deux boîtes : la première flotte avec <code>float: left</code> et la deuxième avec <code>float: inline-start</code>. Si on modifie la propriété <code>writing-mode</code> pour la passer en <code>vertical-rl</code> ou si on modifie <code>direction</code> en <code>rtl</code>, on pourra voir que la première boîte flotte toujours à gauche tandis que la boîte ciblée avec <code>inline-start</code> suit la direction et le mode d'écriture.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}</p>
-
-<h2 id="Exemple_des_propriétés_inset_pour_les_dispositions_positionnées">Exemple des propriétés <code>inset</code> pour les dispositions positionnées</h2>
-
-<p>Le positionnement permet généralement de position un élément de façon relative à son bloc englobant. La plupart du temps, on décale l'objet relativement à la position qu'il aurait occupé sur le flux normal. Par le passé, on utilisait les propriétés physiques {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}}.</p>
-
-<p>Ces propriétés s'utilisent avec une longueur ou avec une pourcentage relatif aux dimensions de l'écran de l'utilisateur.</p>
-
-<p>De nouvelles propriétés ont été définies dans la spécifications des propriétés logiques et permettent de positionner un élément relativement au flux du texte, quel que soit le mode d'écriture. Ces propriétés logiques sont :</p>
-
-<ul>
- <li>{{cssxref("inset-block-start")}}</li>
- <li>{{cssxref("inset-block-end")}}</li>
- <li>{{cssxref("inset-inline-start")}}</li>
- <li>{{cssxref("inset-inline-end")}}.</li>
-</ul>
-
-<p>Dans l'exemple qui suit, on utilise les propriétés <code>inset-block-start</code> et <code>inset-inline-end</code> afin de positionner la boîte bleue de façon absolue dans la zone définie par la bordure grise pointillée et qui a <code>position: relative</code>. En modifiant la propriété <code>writing-mode</code> afin d'utiliser la valeur <code>vertical-rl</code> ou en ajoutant <code>direction: rtl</code>, on pourra voir comment la boîte relative reste dans la direction du texte.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}</p>
-
-<h2 id="Nouvelles_propriétés_raccourcies">Nouvelles propriétés raccourcies</h2>
-
-<p>Cette spécification définit également de nouvelles propriétés logiques qui permettent de définir deux voire quatre valeurs avec une seule déclaration. Pour ces propriétés raccourcies, il n'existe pas d'équivalence avec des propriétés physiques.</p>
-
-<ul>
- <li>{{cssxref("inset")}} — elle permet de définir les quatre décalages avec une correspondance physique.</li>
- <li>{{cssxref("inset-inline")}} — elle permet de définir les décalages sur l'axe en ligne</li>
- <li>{{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc</li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong> Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.</p>
-</div>
-
-<h2 id="Exemple_de_valeurs_logiques_pour_text-align">Exemple de valeurs logiques pour <code>text-align</code></h2>
-
-<p>La propriété {{cssxref("text-align")}} peut s'utiliser avec quatre valeurs logiques qui sont relatives à la direction du texte. Plutôt que d'utiliser <code>left</code> et <code>right</code>, on pourra utiliser <code>start</code> et <code>end</code>. Dans l'exemple suivant, on définit <code>text-align: right</code> pour le premier bloc et <code>text-align: end</code> pour le second.</p>
-
-<p>Si on modifie la valeur de <code>direction</code> pour la passer à <code>rtl</code>, on verra que le premier bloc restera aligné à droite tandis que le texte du second s'alignera sur la fin logique.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}</p>
-
-<p>Le comportement d'ensemble est plus cohérent lorsqu'on utilise des alignements de boîtes logiques (<code>start</code> et <code>end</code>) plutôt que des alignements basés sur les directions physiques.</p>
+{{CSSRef}}
+
+[La spécification sur les propriétés et valeurs logiques](https://drafts.csswg.org/css-logical/) définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une [disposition positionnée](/fr/docs/Web/CSS/CSS_Positioning). Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.
+
+## Correspondance entre les propriétés et les valeurs
+
+Le tableau ci-après définit les propriétés et les valeurs que nous verrons dans ce guide et la correspondance avec les propriétés et valeurs physiques si on utilisait un mode d'écriture horizontal allant de gauche à droite.
+
+| Propriété ou valeur logique                  | Propriété ou valeur physique              |
+| -------------------------------------------- | ----------------------------------------- |
+| {{cssxref("float")}}`: inline-start` | {{cssxref("float")}}`: left`      |
+| {{cssxref("float")}}`: inline-end`   | {{cssxref("float")}}`: right`     |
+| {{cssxref("clear")}}`: inline-start` | {{cssxref("clear")}}`: left`      |
+| {{cssxref("clear")}}`: inline-end`   | {{cssxref("clear")}}`: right`     |
+| {{cssxref("inset-inline-start")}} | {{cssxref("left")}}                  |
+| {{cssxref("inset-inline-end")}}     | {{cssxref("right")}}              |
+| {{cssxref("inset-block-start")}} | {{cssxref("top")}}                  |
+| {{cssxref("inset-block-end")}}     | {{cssxref("bottom")}}              |
+| {{cssxref("text-align")}}`: start`    | {{cssxref("text-align")}}`: left`  |
+| {{cssxref("text-align")}}`: end`      | {{cssxref("text-align")}}`: right` |
+
+En plus de ces correspondances, certaines propriétés logiques raccourcies ont été ajoutées. Pour celles-ci, qui ciblent les extrêmités des axes en ligne ou de bloc, il n'y a pas de correspondance avec des propriétés physiques existantes à l'exception de {{cssxref("inset")}}.
+
+| Propriété logique                    | Objectif                                                                                           |
+| ------------------------------------ | -------------------------------------------------------------------------------------------------- |
+| {{cssxref("inset-inline")}} | Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe en ligne. |
+| {{cssxref("inset-block")}} | Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.  |
+| {{cssxref("inset")}}         | Cette propriété définit les valeurs des quatre décalages.                                          |
+
+## Exemple d'un flottement et d'un dégagement
+
+Les valeurs physiques utilisées avec les propriétés {{cssxref("float")}} et {{cssxref("clear")}} sont `left`, `right` et `both`. Les valeurs logiques définies par la spécification sont `inline-start` et `inline-end` et qui peuvent correspondre à `left` et `right` selon le mode d'écriture.
+
+Dans l'exemple ci-après, on a deux boîtes : la première flotte avec `float: left` et la deuxième avec `float: inline-start`. Si on modifie la propriété `writing-mode` pour la passer en `vertical-rl` ou si on modifie `direction` en `rtl`, on pourra voir que la première boîte flotte toujours à gauche tandis que la boîte ciblée avec `inline-start` suit la direction et le mode d'écriture.
+
+{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}
+
+## Exemple des propriétés `inset` pour les dispositions positionnées
+
+Le positionnement permet généralement de position un élément de façon relative à son bloc englobant. La plupart du temps, on décale l'objet relativement à la position qu'il aurait occupé sur le flux normal. Par le passé, on utilisait les propriétés physiques {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}}.
+
+Ces propriétés s'utilisent avec une longueur ou avec une pourcentage relatif aux dimensions de l'écran de l'utilisateur.
+
+De nouvelles propriétés ont été définies dans la spécifications des propriétés logiques et permettent de positionner un élément relativement au flux du texte, quel que soit le mode d'écriture. Ces propriétés logiques sont :
+
+- {{cssxref("inset-block-start")}}
+- {{cssxref("inset-block-end")}}
+- {{cssxref("inset-inline-start")}}
+- {{cssxref("inset-inline-end")}}.
+
+Dans l'exemple qui suit, on utilise les propriétés `inset-block-start` et `inset-inline-end` afin de positionner la boîte bleue de façon absolue dans la zone définie par la bordure grise pointillée et qui a `position: relative`. En modifiant la propriété `writing-mode` afin d'utiliser la valeur `vertical-rl` ou en ajoutant `direction: rtl`, on pourra voir comment la boîte relative reste dans la direction du texte.
+
+{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}
+
+## Nouvelles propriétés raccourcies
+
+Cette spécification définit également de nouvelles propriétés logiques qui permettent de définir deux voire quatre valeurs avec une seule déclaration. Pour ces propriétés raccourcies, il n'existe pas d'équivalence avec des propriétés physiques.
+
+- {{cssxref("inset")}} — elle permet de définir les quatre décalages avec une correspondance physique.
+- {{cssxref("inset-inline")}} — elle permet de définir les décalages sur l'axe en ligne
+- {{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc
+
+> **Note :** Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.
+
+## Exemple de valeurs logiques pour `text-align`
+
+La propriété {{cssxref("text-align")}} peut s'utiliser avec quatre valeurs logiques qui sont relatives à la direction du texte. Plutôt que d'utiliser `left` et `right`, on pourra utiliser `start` et `end`. Dans l'exemple suivant, on définit `text-align: right` pour le premier bloc et `text-align: end` pour le second.
+
+Si on modifie la valeur de `direction` pour la passer à `rtl`, on verra que le premier bloc restera aligné à droite tandis que le texte du second s'alignera sur la fin logique.
+
+{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}
+
+Le comportement d'ensemble est plus cohérent lorsqu'on utilise des alignements de boîtes logiques (`start` et `end`) plutôt que des alignements basés sur les directions physiques.
diff --git a/files/fr/web/css/css_logical_properties/index.md b/files/fr/web/css/css_logical_properties/index.md
index 7d671c63ed..fbbeecd7f9 100644
--- a/files/fr/web/css/css_logical_properties/index.md
+++ b/files/fr/web/css/css_logical_properties/index.md
@@ -9,156 +9,127 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Logical_Properties
 ---
-<div>{{CSSRef}}</div>
-
-<p><em><strong>CSS Logical Properties</strong></em> (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : <em>block</em> et <em>inline</em>, perpendiculaires, qui dépendent du sens de l'orientation du document.</p>
-
-<p>Ce module définit également les propriétés logiques et les valeurs pour les propriétés précédemment définies avec <abbr title="Cascading Stylesheets">CSS</abbr> 2.1. Les propriétés logiques sont des propriétés dont l'orientation est relative au mode d'écriture du document et possèdent des propriétés physiques équivalentes.</p>
-
-<h3 id="Dimension_de_bloc_ou_de_ligne">Dimension de bloc ou de ligne</h3>
-
-<p>Les propriétés et valeurs logiques utilisent les termes abstraits <em>bloc</em> (<em>block</em>) ou ligne (<em>inline</em>) afin de décrire leur direction. La signification physique de ces termes dépend du <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">mode d'écriture</a>.</p>
-
-<dl>
- <dt>Dimension de bloc</dt>
- <dd>C'est la dimension perpendiculaire au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension verticale lorsque le texte est écrit dans un mode horizontal et de la dimension horizontale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe vertical).</dd>
- <dt>Dimension en ligne</dt>
- <dd>C'est la dimension parallèle au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension horizontale lorsque le texte est écrit dans un mode horizontal et de la dimension verticale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe horizontal).</dd>
-</dl>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés_relatives_au_dimensionnement">Propriétés relatives au dimensionnement</h3>
-
-<ul>
- <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("max-block-size")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("max-inline-size")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li>
-</ul>
-
-<h3 id="Propriétés_relatives_aux_marges_bordures_et_remplissages">Propriétés relatives aux marges, bordures et remplissages</h3>
-
-<ul>
- <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-start")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-color")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-start")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-style")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-width")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-style")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("border-width")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("margin")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("padding")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("padding-inline")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li>
-</ul>
-
-<h3 id="Propriétés_relatives_aux_flottements_et_au_positionnement">Propriétés relatives aux flottements et au positionnement</h3>
-
-<ul>
- <li>{{CSSxRef("clear")}} (mots-clés <code>inline-end</code> {{Experimental_Inline}} et <code>inline-start</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("float")}} (mots-clés <code>inline-end</code> {{Experimental_Inline}} et <code>inline-start</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inset-block-start")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inset-inline")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li>
-</ul>
-
-<h3 id="Autres_propriétés">Autres propriétés</h3>
-
-<ul>
- <li>{{CSSxRef("caption-side")}} (mots-clés <code>inline-end</code> {{Experimental_Inline}} et <code>inline-start</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("overflow-block")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("overflow-inline")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés <code>block</code> {{Experimental_Inline}} et <code>inline</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("text-align")}} (mots-clés <code>end</code> {{Experimental_Inline}} et <code>start</code> {{Experimental_Inline}})</li>
-</ul>
-
-<h3 id="Propriétés_dépréciées">Propriétés dépréciées</h3>
-
-<ul>
- <li>{{CSSxRef("inset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</li>
- <li>{{CSSxRef("inset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</li>
- <li>{{CSSxRef("inset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</li>
- <li>{{CSSxRef("inset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">Concepts de base pour les propriétés logiques et les valeurs logiques</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Sizing">Les propriétés logiques utiles au dimensionnement</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding">Les propriétés logiques utiles aux marges, bordures et remplissage (<em>padding</em>)</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning">Les propriétés logiques utiles aux flottements et au positionnement</a></li>
-</ul>
-
-<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("CSS Logical Properties")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_générale">Compatibilité générale</h2>
-
-<p>De façon générale :</p>
-
-<ul>
- <li>Firefox prend en charge les propriétés logiques lorsqu'il existe une correspondance directe avec les propriétés physiques.</li>
- <li>Idem pour Chrome à partir de la version 69.</li>
- <li>Edge ne prend actuellement (décembre 2018) pas en charge ces propriétés.</li>
- <li>Firefox 66 introduit la prise en charge de deux valeurs raccourcies qui sont également derrière un <em>flag</em> pour Chrome.</li>
-</ul>
-
-<p>Pour des informations précises sur chaque propriété, se référer au tableau de compatibilité des pages des propriétés.</p>
+{{CSSRef}}
+
+**_CSS Logical Properties_** (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : _block_ et _inline_, perpendiculaires, qui dépendent du sens de l'orientation du document.
+
+Ce module définit également les propriétés logiques et les valeurs pour les propriétés précédemment définies avec CSS 2.1. Les propriétés logiques sont des propriétés dont l'orientation est relative au mode d'écriture du document et possèdent des propriétés physiques équivalentes.
+
+### Dimension de bloc ou de ligne
+
+Les propriétés et valeurs logiques utilisent les termes abstraits _bloc_ (_block_) ou ligne (_inline_) afin de décrire leur direction. La signification physique de ces termes dépend du [mode d'écriture](/fr/docs/Web/CSS/CSS_Writing_Modes).
+
+- Dimension de bloc
+  - : C'est la dimension perpendiculaire au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension verticale lorsque le texte est écrit dans un mode horizontal et de la dimension horizontale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe vertical).
+- Dimension en ligne
+  - : C'est la dimension parallèle au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension horizontale lorsque le texte est écrit dans un mode horizontal et de la dimension verticale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe horizontal).
+
+## Référence
+
+### Propriétés relatives au dimensionnement
+
+- {{CSSxRef("block-size")}} {{Experimental_Inline}}
+- {{CSSxRef("inline-size")}} {{Experimental_Inline}}
+- {{CSSxRef("max-block-size")}} {{Experimental_Inline}}
+- {{CSSxRef("max-inline-size")}} {{Experimental_Inline}}
+- {{CSSxRef("min-block-size")}} {{Experimental_Inline}}
+- {{CSSxRef("min-inline-size")}} {{Experimental_Inline}}
+
+### Propriétés relatives aux marges, bordures et remplissages
+
+- {{CSSxRef("border-block")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-color")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-end")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-start")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-style")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-width")}} {{Experimental_Inline}}
+- {{CSSxRef("border-color")}} (mot-clé `logical` {{Experimental_Inline}})
+- {{CSSxRef("border-inline")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-color")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-end")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-start")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-style")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-width")}} {{Experimental_Inline}}
+- {{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}
+- {{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}
+- {{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}
+- {{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}
+- {{CSSxRef("border-style")}} (mot-clé `logical` {{Experimental_Inline}})
+- {{CSSxRef("border-width")}} (mot-clé `logical` {{Experimental_Inline}})
+- {{CSSxRef("margin")}} (mot-clé `logical` {{Experimental_Inline}})
+- {{CSSxRef("margin-block")}} {{Experimental_Inline}}
+- {{CSSxRef("margin-block-end")}} {{Experimental_Inline}}
+- {{CSSxRef("margin-block-start")}} {{Experimental_Inline}}
+- {{CSSxRef("margin-inline")}} {{Experimental_Inline}}
+- {{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}
+- {{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}
+- {{CSSxRef("padding")}} (mot-clé `logical` {{Experimental_Inline}})
+- {{CSSxRef("padding-block")}} {{Experimental_Inline}}
+- {{CSSxRef("padding-block-end")}} {{Experimental_Inline}}
+- {{CSSxRef("padding-block-start")}} {{Experimental_Inline}}
+- {{CSSxRef("padding-inline")}} {{Experimental_Inline}}
+- {{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}
+- {{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}
+
+### Propriétés relatives aux flottements et au positionnement
+
+- {{CSSxRef("clear")}} (mots-clés `inline-end` {{Experimental_Inline}} et `inline-start` {{Experimental_Inline}})
+- {{CSSxRef("float")}} (mots-clés `inline-end` {{Experimental_Inline}} et `inline-start` {{Experimental_Inline}})
+- {{CSSxRef("inset")}} {{Experimental_Inline}}
+- {{CSSxRef("inset-block")}} {{Experimental_Inline}}
+- {{CSSxRef("inset-block-end")}} {{Experimental_Inline}}
+- {{CSSxRef("inset-block-start")}} {{Experimental_Inline}}
+- {{CSSxRef("inset-inline")}} {{Experimental_Inline}}
+- {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}
+- {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}
+
+### Autres propriétés
+
+- {{CSSxRef("caption-side")}} (mots-clés `inline-end` {{Experimental_Inline}} et `inline-start` {{Experimental_Inline}})
+- {{CSSxRef("overflow-block")}} {{Experimental_Inline}}
+- {{CSSxRef("overflow-inline")}} {{Experimental_Inline}}
+- {{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés `block` {{Experimental_Inline}} et `inline` {{Experimental_Inline}})
+- {{CSSxRef("text-align")}} (mots-clés `end` {{Experimental_Inline}} et `start` {{Experimental_Inline}})
+
+### Propriétés dépréciées
+
+- {{CSSxRef("inset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})
+- {{CSSxRef("inset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})
+- {{CSSxRef("inset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})
+- {{CSSxRef("inset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})
+
+## Guides
+
+- [Concepts de base pour les propriétés logiques et les valeurs logiques](/fr/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts)
+- [Les propriétés logiques utiles au dimensionnement](/fr/docs/Web/CSS/CSS_Logical_Properties/Sizing)
+- [Les propriétés logiques utiles aux marges, bordures et remplissage (_padding_)](/fr/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding)
+- [Les propriétés logiques utiles aux flottements et au positionnement](/fr/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning)
+
+## Spécifications
+
+| Spécification                                        | État                                             | Commentaires         |
+| ---------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+## Compatibilité générale
+
+De façon générale :
+
+- Firefox prend en charge les propriétés logiques lorsqu'il existe une correspondance directe avec les propriétés physiques.
+- Idem pour Chrome à partir de la version 69.
+- Edge ne prend actuellement (décembre 2018) pas en charge ces propriétés.
+- Firefox 66 introduit la prise en charge de deux valeurs raccourcies qui sont également derrière un _flag_ pour Chrome.
+
+Pour des informations précises sur chaque propriété, se référer au tableau de compatibilité des pages des propriétés.
diff --git a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md
index cf45a45e67..b8d49e34f8 100644
--- a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md
+++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md
@@ -9,290 +9,156 @@ translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding
 original_slug: >-
   Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages
 ---
-<p>{{CSSRef}}</p>
-
-<p>La spécification <a href="https://drafts.csswg.org/css-logical/">sur les propriétés et valeurs logiques</a> définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (<em>padding</em>) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.</p>
-
-<p>Si vous avez consulté la page principale sur <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">les propriétés et valeurs logiques</a>, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.</p>
-
-<h2 id="Correspondances_pour_les_marges_les_bordures_et_les_remplissages_(padding)">Correspondances pour les marges, les bordures et les remplissages (<em>padding</em>)</h2>
-
-<p>La spécification détaille les correspondances entre les valeurs logiques et les valeurs physiques. Dans le tableau qui suit,on liste les correspondances lorsque le mode d'écriture utilisé est <code>horizontal-tb</code> et où la direction du texte va de gauche à droite. L'axe en ligne est donc horizontal, dirigé de gauche à droite et {{cssxref("margin-inline-start")}} est équivalent à {{cssxref("margin-left")}}.</p>
-
-<p>Si on avait utilisé un mode d'écriture <code>horizontal-tb</code> orienté de droite à gauche, {{cssxref("margin-inline-start")}} aurait correspondu à {{cssxref("margin-right")}}. Pour un mode d'écriture vertical, elle aurait correspondu à {{cssxref("margin-top")}}.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété logique</th>
-   <th scope="col">Propriété physique</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{cssxref("border-block-end")}}</td>
-   <td>{{cssxref("border-bottom")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-end-color")}}</td>
-   <td>{{cssxref("border-bottom-color")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-end-style")}}</td>
-   <td>{{cssxref("border-bottom-style")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-end-width")}}</td>
-   <td>{{cssxref("border-bottom-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-start")}}</td>
-   <td>{{cssxref("border-top")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-start-color")}}</td>
-   <td>{{cssxref("border-top-color")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-start-style")}}</td>
-   <td>{{cssxref("border-top-style")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-start-width")}}</td>
-   <td>{{cssxref("border-top-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-end")}}</td>
-   <td>{{cssxref("border-right")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-end-color")}}</td>
-   <td>{{cssxref("border-right-color")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-end-style")}}</td>
-   <td>{{cssxref("border-right-style")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-end-width")}}</td>
-   <td>{{cssxref("border-right-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-start")}}</td>
-   <td>{{cssxref("border-left")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-start-color")}}</td>
-   <td>{{cssxref("border-left-color")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-start-style")}}</td>
-   <td>{{cssxref("border-left-style")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-start-width")}}</td>
-   <td>{{cssxref("border-left-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-start-start-radius")}}</td>
-   <td>{{cssxref("border-top-left-radius")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-start-end-radius")}}</td>
-   <td>{{cssxref("border-bottom-left-radius")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-end-start-radius")}}</td>
-   <td>{{cssxref("border-top-right-radius")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-end-end-radius")}}</td>
-   <td>{{cssxref("border-bottom-right-radius")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("margin-block-end")}}</td>
-   <td>{{cssxref("margin-bottom")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("margin-block-start")}}</td>
-   <td>{{cssxref("margin-top")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("margin-inline-end")}}</td>
-   <td>{{cssxref("margin-right")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("margin-inline-start")}}</td>
-   <td>{{cssxref("margin-left")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("padding-block-end")}}</td>
-   <td>{{cssxref("padding-bottom")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("padding-block-start")}}</td>
-   <td>{{cssxref("padding-top")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("padding-inline-end")}}</td>
-   <td>{{cssxref("padding-right")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("padding-inline-start")}}</td>
-   <td>{{cssxref("padding-left")}}</td>
-  </tr>
- </tbody>
-</table>
-
-<p>De nouvelles propriétés raccourcies sont également apparues et permettent de manipuler les deux extrêmités d'un même axe. Ces propriétés raccourcies n'ont pas de propriété physique équivalente.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Objectif</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{cssxref("border-block")}}</td>
-   <td>Définit {{cssxref("border-color")}}, {{cssxref("border-style")}} et {{cssxref("border-width")}} pour les deux bordures sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-color")}}</td>
-   <td>Définit <code>border-color</code> pour les deux bordures sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-style")}}</td>
-   <td>Définit <code>border-style</code> pour les deux bordures sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-width")}}</td>
-   <td>Définit <code>border-width</code> pour les deux bordures sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline")}}</td>
-   <td>Définit <code>border-color</code>, <code>-style</code> et <code>-width</code> pour les deux bordures sur l'axe en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-color")}}</td>
-   <td>Définit <code>border-color</code> pour les deux bordures sur l'axe en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-style")}}</td>
-   <td>Définit <code>border-style</code> pour les deux bordures sur l'axe en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-width")}}</td>
-   <td>Définit <code>border-width</code> pour les deux bordures sur l'axe en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("margin-block")}}</td>
-   <td>Défnit les deux marges sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("margin-inline")}}</td>
-   <td>Défnit les deux marges sur l'axe en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("padding-block")}}</td>
-   <td>Définit le remplissage (<em>padding</em>) sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("padding-inline")}}</td>
-   <td>Définit le remplissage (<em>padding</em>) sur l'axe en ligne.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples_de_marges">Exemples de marges</h2>
-
-<p>Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge.</p>
-
-<p>Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure.</p>
-
-<p>Une boîte utilise les propriétés physiques et la seconde les propriétés logiques. Vous pouvez modifier la valeur de la propriété {{cssxref("direction")}} (la changer en <code>rtl</code> par exemple) : la première boîte conservera les mêmes marges tandis que la seconde verra ses marges en ligne échangées.</p>
-
-<p>Vous pouvez également modifier la propriété <code>writing-mode</code> pour la passer de <code>horizontal-tb</code> à <code>vertical-rl</code>. Là aussi, vous pourrez voir les marges rester les mêmes pour la première boîte et passer d'un côté à l'autre pour la seconde.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}</p>
-
-<h3 id="Propriétés_raccourcies_pour_les_marges">Propriétés raccourcies pour les marges</h3>
-
-<p>Avec les propriétés logiques, on peut définir les deux côtés en ligne et les deux côtés en bloc à l'aide d'une propriété et on a donc de nouvelles propriétés raccourcies : {{cssxref("margin-inline")}} et {{cssxref("margin-block")}}. Ces deux propriétés s'utilisent avec deux valeurs : la première sera appliquée au côté du début pour l'axe et la deuxième au côté de fin. Si une seule valeur est utilisée, elle sera appliquée aux deux côtés.</p>
-
-<p>Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une marge de 5 pixels sur le côté haut de la boîte et une marge de 10 pixels sur le bas de la boîte.</p>
-
-<pre class="brush: css">.box {
+{{CSSRef}}
+
+La spécification [sur les propriétés et valeurs logiques](https://drafts.csswg.org/css-logical/) définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (_padding_) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.
+
+Si vous avez consulté la page principale sur [les propriétés et valeurs logiques](/en-US/docs/Web/CSS/CSS_Logical_Properties), vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.
+
+## Correspondances pour les marges, les bordures et les remplissages (_padding_)
+
+La spécification détaille les correspondances entre les valeurs logiques et les valeurs physiques. Dans le tableau qui suit,on liste les correspondances lorsque le mode d'écriture utilisé est `horizontal-tb` et où la direction du texte va de gauche à droite. L'axe en ligne est donc horizontal, dirigé de gauche à droite et {{cssxref("margin-inline-start")}} est équivalent à {{cssxref("margin-left")}}.
+
+Si on avait utilisé un mode d'écriture `horizontal-tb` orienté de droite à gauche, {{cssxref("margin-inline-start")}} aurait correspondu à {{cssxref("margin-right")}}. Pour un mode d'écriture vertical, elle aurait correspondu à {{cssxref("margin-top")}}.
+
+| Propriété logique                                    | Propriété physique                                       |
+| ---------------------------------------------------- | -------------------------------------------------------- |
+| {{cssxref("border-block-end")}}             | {{cssxref("border-bottom")}}                     |
+| {{cssxref("border-block-end-color")}}     | {{cssxref("border-bottom-color")}}             |
+| {{cssxref("border-block-end-style")}}     | {{cssxref("border-bottom-style")}}             |
+| {{cssxref("border-block-end-width")}}     | {{cssxref("border-bottom-width")}}             |
+| {{cssxref("border-block-start")}}         | {{cssxref("border-top")}}                         |
+| {{cssxref("border-block-start-color")}} | {{cssxref("border-top-color")}}                 |
+| {{cssxref("border-block-start-style")}} | {{cssxref("border-top-style")}}                 |
+| {{cssxref("border-block-start-width")}} | {{cssxref("border-top-width")}}                 |
+| {{cssxref("border-inline-end")}}         | {{cssxref("border-right")}}                     |
+| {{cssxref("border-inline-end-color")}} | {{cssxref("border-right-color")}}             |
+| {{cssxref("border-inline-end-style")}} | {{cssxref("border-right-style")}}             |
+| {{cssxref("border-inline-end-width")}} | {{cssxref("border-right-width")}}             |
+| {{cssxref("border-inline-start")}}         | {{cssxref("border-left")}}                     |
+| {{cssxref("border-inline-start-color")}} | {{cssxref("border-left-color")}}             |
+| {{cssxref("border-inline-start-style")}} | {{cssxref("border-left-style")}}             |
+| {{cssxref("border-inline-start-width")}} | {{cssxref("border-left-width")}}             |
+| {{cssxref("border-start-start-radius")}} | {{cssxref("border-top-left-radius")}}         |
+| {{cssxref("border-start-end-radius")}} | {{cssxref("border-bottom-left-radius")}}     |
+| {{cssxref("border-end-start-radius")}} | {{cssxref("border-top-right-radius")}}     |
+| {{cssxref("border-end-end-radius")}}     | {{cssxref("border-bottom-right-radius")}} |
+| {{cssxref("margin-block-end")}}             | {{cssxref("margin-bottom")}}                     |
+| {{cssxref("margin-block-start")}}         | {{cssxref("margin-top")}}                         |
+| {{cssxref("margin-inline-end")}}         | {{cssxref("margin-right")}}                     |
+| {{cssxref("margin-inline-start")}}         | {{cssxref("margin-left")}}                     |
+| {{cssxref("padding-block-end")}}         | {{cssxref("padding-bottom")}}                 |
+| {{cssxref("padding-block-start")}}         | {{cssxref("padding-top")}}                     |
+| {{cssxref("padding-inline-end")}}         | {{cssxref("padding-right")}}                     |
+| {{cssxref("padding-inline-start")}}     | {{cssxref("padding-left")}}                     |
+
+De nouvelles propriétés raccourcies sont également apparues et permettent de manipuler les deux extrêmités d'un même axe. Ces propriétés raccourcies n'ont pas de propriété physique équivalente.
+
+| Propriété                                    | Objectif                                                                                                                                                             |
+| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{cssxref("border-block")}}         | Définit {{cssxref("border-color")}}, {{cssxref("border-style")}} et {{cssxref("border-width")}} pour les deux bordures sur l'axe de bloc. |
+| {{cssxref("border-block-color")}} | Définit `border-color` pour les deux bordures sur l'axe de bloc.                                                                                                     |
+| {{cssxref("border-block-style")}} | Définit `border-style` pour les deux bordures sur l'axe de bloc.                                                                                                     |
+| {{cssxref("border-block-width")}} | Définit `border-width` pour les deux bordures sur l'axe de bloc.                                                                                                     |
+| {{cssxref("border-inline")}}         | Définit `border-color`, `-style` et `-width` pour les deux bordures sur l'axe en ligne.                                                                              |
+| {{cssxref("border-inline-color")}} | Définit `border-color` pour les deux bordures sur l'axe en ligne.                                                                                                    |
+| {{cssxref("border-inline-style")}} | Définit `border-style` pour les deux bordures sur l'axe en ligne.                                                                                                    |
+| {{cssxref("border-inline-width")}} | Définit `border-width` pour les deux bordures sur l'axe en ligne.                                                                                                    |
+| {{cssxref("margin-block")}}         | Défnit les deux marges sur l'axe de bloc.                                                                                                                            |
+| {{cssxref("margin-inline")}}         | Défnit les deux marges sur l'axe en ligne.                                                                                                                           |
+| {{cssxref("padding-block")}}         | Définit le remplissage (_padding_) sur l'axe de bloc.                                                                                                                |
+| {{cssxref("padding-inline")}}     | Définit le remplissage (_padding_) sur l'axe en ligne.                                                                                                               |
+
+## Exemples de marges
+
+Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge.
+
+Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure.
+
+Une boîte utilise les propriétés physiques et la seconde les propriétés logiques. Vous pouvez modifier la valeur de la propriété {{cssxref("direction")}} (la changer en `rtl` par exemple) : la première boîte conservera les mêmes marges tandis que la seconde verra ses marges en ligne échangées.
+
+Vous pouvez également modifier la propriété `writing-mode` pour la passer de `horizontal-tb` à `vertical-rl`. Là aussi, vous pourrez voir les marges rester les mêmes pour la première boîte et passer d'un côté à l'autre pour la seconde.
+
+{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}
+
+### Propriétés raccourcies pour les marges
+
+Avec les propriétés logiques, on peut définir les deux côtés en ligne et les deux côtés en bloc à l'aide d'une propriété et on a donc de nouvelles propriétés raccourcies : {{cssxref("margin-inline")}} et {{cssxref("margin-block")}}. Ces deux propriétés s'utilisent avec deux valeurs : la première sera appliquée au côté du début pour l'axe et la deuxième au côté de fin. Si une seule valeur est utilisée, elle sera appliquée aux deux côtés.
+
+Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une marge de 5 pixels sur le côté haut de la boîte et une marge de 10 pixels sur le bas de la boîte.
+
+```css
+.box {
   margin-block: 5px 10px;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Ces propriétés raccourcies, <code>margin-inline</code> et <code>margin-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p>
-</div>
+> **Note :** Ces propriétés raccourcies, `margin-inline` et `margin-block`, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.
 
-<h2 id="Exemples_pour_le_remplissage">Exemples pour le remplissage</h2>
+## Exemples pour le remplissage
 
-<p>Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique.</p>
+Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique.
 
-<p>Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture <code>horizontal-tb</code>, les deux boîtes auront la même apparence.</p>
+Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture `horizontal-tb`, les deux boîtes auront la même apparence.
 
-<p>En modifiant la propriété <code>direction</code> avec la valeur <code>rtl</code>, les boîtes seront affichées de droite à gauche. Le remplissage de la première boîte restera à la même place et celui de la deuxième boîte changera de côté.</p>
+En modifiant la propriété `direction` avec la valeur `rtl`, les boîtes seront affichées de droite à gauche. Le remplissage de la première boîte restera à la même place et celui de la deuxième boîte changera de côté.
 
-<p>Vous pouvez aussi modifier la valeur de la propriété <code>writing-mode</code> pour la passer de <code>horizontal-tb</code> à <code>vertical-rl</code>. Là encore, rien ne change pour la première boîte mais pour la seconde, les remplissages se trouvent échangés.</p>
+Vous pouvez aussi modifier la valeur de la propriété `writing-mode` pour la passer de `horizontal-tb` à `vertical-rl`. Là encore, rien ne change pour la première boîte mais pour la seconde, les remplissages se trouvent échangés.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}
 
-<h3 id="Propriétés_raccourcies_pour_le_remplissage">Propriétés raccourcies pour le remplissage</h3>
+### Propriétés raccourcies pour le remplissage
 
-<p>À l'instar des marges, deux propriétés raccourcies ont été ajoutées {{cssxref("padding-inline")}} et {{cssxref("padding-block")}}. Elles permettent, respectivement, de définir le remplissage pour les deux côtés sur l'axe en ligne et sur l'axe en bloc.</p>
+À l'instar des marges, deux propriétés raccourcies ont été ajoutées {{cssxref("padding-inline")}} et {{cssxref("padding-block")}}. Elles permettent, respectivement, de définir le remplissage pour les deux côtés sur l'axe en ligne et sur l'axe en bloc.
 
-<p>Avec un mode d'écriture horizontal, cette déclaration CSS appliquera un remplissage de <code>5px</code> sur le haut de la boîte et un remplissage de 10 pixels en bas de la boîte :</p>
+Avec un mode d'écriture horizontal, cette déclaration CSS appliquera un remplissage de `5px` sur le haut de la boîte et un remplissage de 10 pixels en bas de la boîte :
 
-<pre class="brush: css">.box {
+```css
+.box {
   padding-block: 5px 10px;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Ces propriétés raccourcies, <code>padding-inline</code> et <code>padding-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p>
-</div>
+> **Note :** Ces propriétés raccourcies, `padding-inline` et `padding-block`, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.
 
-<h2 id="Exemples_pour_les_bordures">Exemples pour les bordures</h2>
+## Exemples pour les bordures
 
-<p>Les propriétés relatives aux bordures fournissent une grande quantité de propriétés tant logiques que physiques (pour la couleur, la largeur, le style, pour chaque côté, pour les propriétés raccourcies). De la même façon qu'on a des équivalences avec les propriétés physiques pour les marges et les remplissages, on a également des propriétés logiques pour les bordures.</p>
+Les propriétés relatives aux bordures fournissent une grande quantité de propriétés tant logiques que physiques (pour la couleur, la largeur, le style, pour chaque côté, pour les propriétés raccourcies). De la même façon qu'on a des équivalences avec les propriétés physiques pour les marges et les remplissages, on a également des propriétés logiques pour les bordures.
 
-<p>L'exemple ci-après utilise certaines propriétés détaillées et propriétés raccourcies. Comme précédemment, vous pouvez modifier les valeurs des propriétés <code>direction</code> et <code>writing-mode</code> pour observer les impacts.</p>
+L'exemple ci-après utilise certaines propriétés détaillées et propriétés raccourcies. Comme précédemment, vous pouvez modifier les valeurs des propriétés `direction` et `writing-mode` pour observer les impacts.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}
 
-<h3 id="Propriétés_raccourcies_pour_les_bordures">Propriétés raccourcies pour les bordures</h3>
+### Propriétés raccourcies pour les bordures
 
-<p>Il y a des propriétés raccourcies avec deux valeurs pour paramétrer la largeur, le style et la couleur de la bordure pour les côtés sur l'axe en ligne ou pour les côtés sur l'axe de bloc. Le fragment de code qui suit, si on l'utilise avec un mode d'écriture horizontal, fournira une bordure verte de 2 pixels sur un trait plein en haut et en bas de la boîte et une bordure pointillée violette de 4 pixels sur les côtés gauche et droit.</p>
+Il y a des propriétés raccourcies avec deux valeurs pour paramétrer la largeur, le style et la couleur de la bordure pour les côtés sur l'axe en ligne ou pour les côtés sur l'axe de bloc. Le fragment de code qui suit, si on l'utilise avec un mode d'écriture horizontal, fournira une bordure verte de 2 pixels sur un trait plein en haut et en bas de la boîte et une bordure pointillée violette de 4 pixels sur les côtés gauche et droit.
 
-<pre class="brush: css">.box {
+```css
+.box {
   border-block: 2px solid green;
   border-inline-width: 4px;
   border-inline-style: dotted;
   border-inline-color: rebeccapurple;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Ces propriétés raccourcies, <code>border-inline</code> et <code>border-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p>
-</div>
+> **Note :** Ces propriétés raccourcies, `border-inline` et `border-block`, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.
 
-<h3 id="Propriétés_pour_les_courbures_des_bordures_relatives_au_flux">Propriétés pour les courbures des bordures relatives au flux</h3>
+### Propriétés pour les courbures des bordures relatives au flux
 
-<p>La spécification a également ajouté des propriétés relatives au flux pour les propriétés détaillées associées à {{cssxref("border-radius")}}. Ces propriétés n'ont pas encore (décembre 2018) été implémentées par les différents navigateurs. L'exemple qui suit, avec un mode d'écriture horizontal, fournira une bordure en haut à droite avec un rayon de courbure de 1em, une bordure en bas à droite sans rayon de courbure, une bordure en bas à gauche avec un rayon de courbure de 20 pixels et une bordure courbée avec un rayon de 40 pixels pour le coin supérieur gauche.</p>
+La spécification a également ajouté des propriétés relatives au flux pour les propriétés détaillées associées à {{cssxref("border-radius")}}. Ces propriétés n'ont pas encore (décembre 2018) été implémentées par les différents navigateurs. L'exemple qui suit, avec un mode d'écriture horizontal, fournira une bordure en haut à droite avec un rayon de courbure de 1em, une bordure en bas à droite sans rayon de courbure, une bordure en bas à gauche avec un rayon de courbure de 20 pixels et une bordure courbée avec un rayon de 40 pixels pour le coin supérieur gauche.
 
-<pre class="brush: css">.box {
+```css
+.box {
   border-end-start-radius: 1em;
   border-end-end-radius: 0;
   border-start-end-radius: 20px;
   border-start-start-radius: 40px;
-}</pre>
+}
+```
 
-<h2 id="Utiliser_les_valeurs_logiques_avec_les_propriétés_raccourcies_classiques">Utiliser les valeurs logiques avec les propriétés raccourcies classiques</h2>
+## Utiliser les valeurs logiques avec les propriétés raccourcies classiques
 
-<p>La spécification définit une suggestion qui pourrait être utilisée afin de manipuler les propriétés raccourcies (<code>margin</code> par exemple) avec des valeurs logiques. Toutefois, le consensus n'a pas encore été atteint sur la résolution de ce point et est discuté au travers de <a href="https://github.com/w3c/csswg-drafts/issues/1282">cette <em>issue</em></a>.</p>
+La spécification définit une suggestion qui pourrait être utilisée afin de manipuler les propriétés raccourcies (`margin` par exemple) avec des valeurs logiques. Toutefois, le consensus n'a pas encore été atteint sur la résolution de ce point et est discuté au travers de [cette _issue_](https://github.com/w3c/csswg-drafts/issues/1282).
 
-<p>À l'heure actuelle (décembre 2018), les propriétés raccourcies <code>margin</code>, <code>padding</code> et <code>border</code> ne fonctionent qu'avec les valeurs physiques. Aussi, si respecter le flux du document est primordial et que vous devez utiliser les valeurs logiques, vous devrez recourir aux propriétés détaillées afin d'utiliser les valeurs logiques.</p>
+À l'heure actuelle (décembre 2018), les propriétés raccourcies `margin`, `padding` et `border` ne fonctionent qu'avec les valeurs physiques. Aussi, si respecter le flux du document est primordial et que vous devez utiliser les valeurs logiques, vous devrez recourir aux propriétés détaillées afin d'utiliser les valeurs logiques.
diff --git a/files/fr/web/css/css_logical_properties/sizing/index.md b/files/fr/web/css/css_logical_properties/sizing/index.md
index 2ede7d1bca..e3ded8e4ea 100644
--- a/files/fr/web/css/css_logical_properties/sizing/index.md
+++ b/files/fr/web/css/css_logical_properties/sizing/index.md
@@ -8,83 +8,55 @@ tags:
 translation_of: Web/CSS/CSS_Logical_Properties/Sizing
 original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.</p>
+Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.
 
-<p>Lorsqu'on définit la taille d'un objet, <a href="https://drafts.csswg.org/css-logical/">la spécification sur les propriétés et les valeurs logiques</a> permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs <em>logiques</em>, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs <em>physiques</em> en combinaison avec ces propriétés et ces valeurs logiques.</p>
+Lorsqu'on définit la taille d'un objet, [la spécification sur les propriétés et les valeurs logiques](https://drafts.csswg.org/css-logical/) permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs _logiques_, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs _physiques_ en combinaison avec ces propriétés et ces valeurs logiques.
 
-<h2 id="Correspondances_pour_les_dimensions">Correspondances pour les dimensions</h2>
+## Correspondances pour les dimensions
 
-<p>Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (<code>horizontal-tb</code>) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.</p>
+Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (`horizontal-tb`) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.
 
-<p>Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.</p>
+Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété logique</th>
-   <th scope="col">Propriété physique</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{CSSxRef("inline-size")}}</td>
-   <td>{{CSSxRef("width")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("block-size")}}</td>
-   <td>{{CSSxRef("height")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("min-inline-size")}}</td>
-   <td>{{CSSxRef("min-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("min-block-size")}}</td>
-   <td>{{CSSxRef("min-height")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("max-inline-size")}}</td>
-   <td>{{CSSxRef("max-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("max-block-size")}}</td>
-   <td>{{CSSxRef("max-height")}}</td>
-  </tr>
- </tbody>
-</table>
+| Propriété logique                        | Propriété physique               |
+| ---------------------------------------- | -------------------------------- |
+| {{CSSxRef("inline-size")}}     | {{CSSxRef("width")}}     |
+| {{CSSxRef("block-size")}}         | {{CSSxRef("height")}}     |
+| {{CSSxRef("min-inline-size")}} | {{CSSxRef("min-width")}} |
+| {{CSSxRef("min-block-size")}} | {{CSSxRef("min-height")}} |
+| {{CSSxRef("max-inline-size")}} | {{CSSxRef("max-width")}} |
+| {{CSSxRef("max-block-size")}} | {{CSSxRef("max-height")}} |
 
-<h2 id="Exemple_pour_width_et_height">Exemple pour <code>width</code> et <code>height</code></h2>
+## Exemple pour `width` et `height`
 
-<p>Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer <code>width</code> par <code>inline-size</code> et <code>height</code> par <code>block-size</code> et on obtiendra le même résultat.</p>
+Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer `width` par `inline-size` et `height` par `block-size` et on obtiendra le même résultat.
 
-<p>Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec <code>horizontal-tb</code>. En modifiant cette valeur pour la passer à <code>vertical-rl</code>, on verra que le premier exemple, qui utilise <code>width</code> et <code>height</code>, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise <code>inline-size</code> et <code>block-size</code>, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.</p>
+Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec `horizontal-tb`. En modifiant cette valeur pour la passer à `vertical-rl`, on verra que le premier exemple, qui utilise `width` et `height`, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise `inline-size` et `block-size`, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}
 
-<h2 id="Exemple_pour_min-width_et_min-height">Exemple pour <code>min-width</code> et <code>min-height</code></h2>
+## Exemple pour `min-width` et `min-height`
 
-<p>Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que <code>inline-size</code> et <code>block-size</code> mais paramètrent une taille minimale plutôt qu'une taille fixe.</p>
+Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que `inline-size` et `block-size` mais paramètrent une taille minimale plutôt qu'une taille fixe.
 
-<p>Dans l'exemple suivant, vous pouvez passer le mode d'écriture en <code>vertical-rl</code> et observer l'effet obtenu. Là encore, on utilise la propriété physique (<code>min-height</code>) sur le premier exemple et la propriété logique (<code>min-block-size</code>) sur le second.</p>
+Dans l'exemple suivant, vous pouvez passer le mode d'écriture en `vertical-rl` et observer l'effet obtenu. Là encore, on utilise la propriété physique (`min-height`) sur le premier exemple et la propriété logique (`min-block-size`) sur le second.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}
 
-<h2 id="Exemple_pour_max-width_et_max-height">Exemple pour <code>max-width</code> et <code>max-height</code></h2>
+## Exemple pour `max-width` et `max-height`
 
-<p>Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.</p>
+Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}
 
-<h2 id="Mots-clés_logiques_pour_resize">Mots-clés logiques pour <code>resize</code></h2>
+## Mots-clés logiques pour `resize`
 
-<p>La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques <code>horizontal</code> et <code>vertical</code>. La propriété <code>resize</code> peut désormais s'utiliser également avec des valeurs logiques : <code>resize: inline</code> permettra de redimensionner un objet sur l'axe en ligne et <code>resize: block</code> permettra de le redimensionner sur l'axe en bloc.</p>
+La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques `horizontal` et `vertical`. La propriété `resize` peut désormais s'utiliser également avec des valeurs logiques : `resize: inline` permettra de redimensionner un objet sur l'axe en ligne et `resize: block` permettra de le redimensionner sur l'axe en bloc.
 
-<p>La valeur <code>both</code> peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.</p>
+La valeur `both` peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}
 
-<div class="warning">
-<p><strong>Attention :</strong> À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour <code>resize</code>.</p>
-</div>
+> **Attention :** À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour `resize`.