Une erreur de script s'est produite sur cette page. En attendant qu'elle soit traitée par les éditeurs du site, vous pouvez consulter le contenu partiel ci-dessous.

{{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

/* Valeurs de longueur */
/* Type <length>       */
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

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exemple {
  writing-mode: vertical-lr;
  margin-block-end: 20px;
  background-color: #c8c800;
}

HTML

<div>
  <p class="exemple">Texte d'exemple</p>
</div>

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")}}

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, Goofy
Dernière mise à jour par : SphinxKnight,