margin-block
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
-CSS Kurzschreibweise für Eigenschaft definiert die logischen Anfangs- und Endabstände eines Elements im Block, die abhängig vom Schreibmodus, der Richtung und der Textausrichtung des Elements auf physische Abstände abgebildet werden.
Probieren Sie es aus
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
/* <length> values */
margin-block: 10px 20px; /* An absolute length */
margin-block: 1em 2em; /* relative to the text size */
margin-block: 5% 2%; /* relative to the nearest block container's width */
margin-block: 10px; /* sets both start and end values */
/* Keyword values */
margin-block: auto;
/* Global values */
margin-block: inherit;
margin-block: initial;
margin-block: revert;
margin-block: revert-layer;
margin-block: unset;
Diese Eigenschaft entspricht den Eigenschaften margin-top
und margin-bottom
, oder margin-right
und margin-left
, abhängig von den definierten Werten für writing-mode
, direction
, und text-orientation
.
Die margin-block
-Eigenschaft kann mit einem oder zwei Werten spezifiziert werden.
- Wenn ein Wert angegeben ist, gilt derselbe Abstand für sowohl Anfang als auch Ende.
- Wenn zwei Werte angegeben sind, gilt der erste Abstand für den Anfang, der zweite für das Ende.
Werte
Die margin-block
-Eigenschaft nimmt die gleichen Werte an wie die margin
-Eigenschaft.
Formale Definition
Anfangswert | wie die jeweiligen Kurzschreibweisen: |
---|---|
Anwendbar auf | wie bei margin |
Vererbt | Nein |
Prozentwerte | hängt vom Layoutmodell ab |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | Längenangabe |
Formale Syntax
margin-block =
<'margin-top'>{1,2}
<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
Block-Anfangs- und Endabstände festlegen
CSS
div {
background-color: yellow;
width: 120px;
height: auto;
border: 1px solid green;
}
p {
margin: 0;
margin-block: 20px 40px;
background-color: tan;
}
.verticalExample {
writing-mode: vertical-rl;
}
HTML
<div>
<p>Example text</p>
</div>
<div class="verticalExample">
<p>Example text</p>
</div>
Ergebnis
Spezifikationen
Specification |
---|
CSS Logical Properties and Values Level 1 # propdef-margin-block |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- CSS Logische Eigenschaften und Werte
- Die zugeordneten physischen Eigenschaften:
margin-top
,margin-right
,margin-bottom
, undmargin-left
writing-mode
,direction
,text-orientation