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 je nach dem Schreibmodus, der Richtung und der Textausrichtung des Elements auf einen physikalischen 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 */
margin-block-end: anchor-size(inline);
margin-block-end: calc(anchor-size(--myAnchor block, 20px) / 4);
/* 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 margin-top
, margin-right
, margin-bottom
oder margin-left
Eigenschaft, abhängig von den definierten Werten für writing-mode
, direction
und text-orientation
.
Sie steht im Zusammenhang mit margin-block-start
, margin-inline-start
und margin-inline-end
, die die anderen Ränder des Elements definieren.
Werte
Die margin-block-end
Eigenschaft nimmt die gleichen Werte an wie die margin-left
Eigenschaft.
Formale Definition
Anfangswert | 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
Blockendrand festlegen
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 zugeordneten physikalischen Eigenschaften:
margin-top
,margin-right
,margin-bottom
undmargin-left
writing-mode
,direction
,text-orientation