From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/margin-block/index.md | 81 +++++++++++++++------------------- 1 file changed, 35 insertions(+), 46 deletions(-) (limited to 'files/fr/web/css/margin-block') diff --git a/files/fr/web/css/margin-block/index.md b/files/fr/web/css/margin-block/index.md index 558482254f..0e5ed13c26 100644 --- a/files/fr/web/css/margin-block/index.md +++ b/files/fr/web/css/margin-block/index.md @@ -9,12 +9,13 @@ tags: - Reference translation_of: Web/CSS/margin-block --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}{{SeeCompatTable}} -

La propriété margin-block définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à   {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+La propriété **`margin-block`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à   {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. -
/* Valeurs de longueur */
-/* Type <length> */
+```css
+/* Valeurs de longueur */
+/* Type  */
 margin-block: 10px 20px;  /* Une longueur absolue */
 margin-block: 1em 2em;    /* Une longueur relative à la taille du texte */
 margin-block: 5% 2%;      /* Une longueur relative à la largeur ou hauteur du bloc englobant */
@@ -27,25 +28,26 @@ margin-block: auto;
 margin-block: inherit;
 margin-block: initial;
 margin-block: unset;
-
+``` -

Cette propriété est une propriété raccourcie pour les deux propriétés logiques {{cssxref("margin-block-start")}} et {{cssxref("margin-block-end")}}. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("margin-inline")}} qui correspond aux propriétés {{cssxref("margin-inline-start")}} et {{cssxref("margin-inline-end")}}.

+Cette propriété est une propriété raccourcie pour les deux propriétés logiques {{cssxref("margin-block-start")}} et {{cssxref("margin-block-end")}}. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("margin-inline")}} qui correspond aux propriétés {{cssxref("margin-inline-start")}} et {{cssxref("margin-inline-end")}}. -

Syntaxe

+## Syntaxe -

Valeurs

+### Valeurs -

La propriété margin-block peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.

+La propriété `margin-block` peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -55,47 +57,34 @@ margin-block: unset;
   writing-mode: vertical-rl;
   margin-block: 20px 40px;
   background-color: #c8c800;
-}
+} +``` -

HTML

+### HTML -
<div>
-  <p class="texteExemple">Texte d'exemple</p>
-</div>
-
+```html +
+

Texte d'exemple

+
+``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples", 140, 140)}}

+{{EmbedLiveSample("Exemples", 140, 140)}} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. | -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.margin-block")}}

+{{Compat("css.properties.margin-block")}} -

Voir aussi

+## Voir aussi - +- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} +- Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -- cgit v1.2.3-54-g00ecf