margin-block-end

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

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

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

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