margin-block-end
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
Die margin-block-end
CSS Eigenschaft definiert den logischen Blockendrand eines Elements, der abhängig vom Schreibmodus, der Richtung und der Textausrichtung des Elements auf einen physischen Rand abgebildet wird.
Probieren Sie es aus
Syntax
/* <length> values */
margin-block-end: 10px; /* An absolute length */
margin-block-end: 1em; /* relative to the text size */
margin-block-end: 5%; /* relative to the nearest block container's width */
/* Keyword values */
margin-block-end: auto;
/* Global values */
margin-block-end: inherit;
margin-block-end: initial;
margin-block-end: revert;
margin-block-end: revert-layer;
margin-block-end: unset;
Sie entspricht der Eigenschaft margin-top
, margin-right
, margin-bottom
, oder margin-left
abhängig von den definierten Werten für writing-mode
, direction
, und text-orientation
.
Sie steht in Beziehung zu margin-block-start
, margin-inline-start
, und margin-inline-end
, die die anderen Ränder des Elements definieren.
Werte
Die Eigenschaft margin-block-end
nimmt die gleichen Werte wie die margin-left
Eigenschaft an.
Formale Definition
Initialer Wert | 0 |
---|---|
Anwendbar auf | wie bei margin |
Vererbt | Nein |
Prozentwerte | hängt vom Layoutmodell ab |
Berechneter Wert | falls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten auto |
Animationstyp | Längenangabe |
Formale Syntax
margin-block-end =
<'margin-top'>
<margin-top> =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Beispiele
Festlegung des Blockendrandes
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
margin-block-end: 20px;
background-color: #c8c800;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Logical Properties and Values Level 1 # margin-properties |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- CSS Logical Properties and Values
- Die abgebildeten physischen Eigenschaften:
margin-top
,margin-right
,margin-bottom
, undmargin-left
writing-mode
,direction
,text-orientation