--- title: margin-block-end slug: Web/CSS/margin-block-end tags: - CSS - Experimental - Propriété - Reference translation_of: Web/CSS/margin-block-end --- {{CSSRef}}{{SeeCompatTable}} La propriété **`margin-block-end`** définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-block-end.html")}}Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément. ## Syntaxe ```css /* Valeurs de longueur */ /* Type */ margin-block-end: 10px; /* Une longueur absolue */ margin-block-end: 1em; /* Une longueur relative à la taille du texte */ margin-block-end: 5%; /* Une largeur relative à la largeur du bloc englobant */ /* Valeurs avec un mot-clé */ margin-block-end: auto; /* Valeurs globales */ margin-block-end: inherit; ``` ### Valeurs La propriété `margin-block-end` peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}. ### Syntaxe formelle {{csssyntax}} ## Exemples ### CSS ```css div { background-color: yellow; width: 120px; height: 120px; } .exemple { writing-mode: vertical-lr; margin-block-end: 20px; background-color: #c8c800; } ``` ### HTML ```html

Texte d'exemple

``` ### Résultat {{EmbedLiveSample("Exemples", 140, 140)}} ## Spécifications | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- | | {{SpecName("CSS Logical Properties", "#propdef-margin-block-end", "margin-block-end")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. | {{cssinfo}} ## Compatibilité des navigateurs {{Compat("css.properties.margin-block-end")}} ## Voir aussi - Les propriétés physiques correspondantes : - {{cssxref("margin-top")}}, - {{cssxref("margin-right")}}, - {{cssxref("margin-bottom")}} - {{cssxref("margin-left")}} - {{cssxref("writing-mode")}} - {{cssxref("direction")}} - {{cssxref("text-orientation")}}