CSS-Eigenschaft margin-block
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2021 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die CSS-Kurzschreibweise margin-block definiert die logischen Außenabstände eines Elements am Anfang und Ende der Blockachse. Welchen physischen Außenabständen diese entsprechen, hängt vom Schreibmodus, der Schreibrichtung und der Textausrichtung des Elements ab.
Probieren Sie es aus
margin-block: 10px 20px;
writing-mode: horizontal-tb;
margin-block: 20px 40px;
writing-mode: vertical-rl;
margin-block: 5% 20%;
writing-mode: horizontal-tb;
margin-block: 1rem auto;
writing-mode: vertical-lr;
<section id="default-example">
<div id="container">
<div class="row">One</div>
<div class="row transition-all" id="example-element">Two</div>
<div class="row">Three</div>
</div>
</section>
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.row {
height: 33.33%;
display: inline-block;
border: solid #ce7777 10px;
background-color: #2b3a55;
color: white;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
}
Zugehörige Eigenschaften
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 */
margin-block: anchor-size(inline);
margin-block: calc(anchor-size(width) / 4) 1em;
/* Keyword value */
margin-block: auto;
/* Global values */
margin-block: inherit;
margin-block: initial;
margin-block: revert;
margin-block: revert-layer;
margin-block: unset;
Abhängig von den für writing-mode, direction und text-orientation festgelegten Werten entspricht diese Eigenschaft entweder margin-top und margin-bottom oder margin-right und margin-left.
Für die Eigenschaft margin-block können ein oder zwei Werte angegeben werden.
- Wird ein Wert angegeben, gilt derselbe Außenabstand am Anfang und am Ende.
- Werden zwei Werte angegeben, gilt der erste für den Außenabstand am Anfang und der zweite für den Außenabstand am Ende.
Werte
Die Eigenschaft margin-block akzeptiert dieselben Werte wie die Eigenschaft margin-top.
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
Außenabstände am Anfang und Ende der Blockachse festlegen
HTML
<div>
<p>Example text</p>
</div>
<div class="verticalExample">
<p>Example text</p>
</div>
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;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-margin-block |
Browser-Kompatibilität
Siehe auch
- Logische CSS-Eigenschaften und -Werte
- Die entsprechenden physischen Eigenschaften:
margin-top,margin-right,margin-bottomundmargin-left writing-mode,direction,text-orientation