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 definiert die logischen Start- und Endabstände eines Elements, die je nach Schreibmodus, Richtung und 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

css
/* <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 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 für writing-mode, direction und text-orientation definierten Werten.

Die margin-block-Eigenschaft kann mit einem oder zwei Werten angegeben werden.

  • Wenn ein Wert angegeben wird, gilt der gleiche Abstand für sowohl Start als auch Ende.
  • Wenn zwei Werte angegeben werden, gilt der erste Abstand für den Start, der zweite für das Ende.

Werte

Die margin-block-Eigenschaft nimmt die gleichen Werte wie die Eigenschaft margin an.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufwie bei margin
VererbtNein
Prozentwertehängt vom Layoutmodell ab
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
  • margin-block-start: falls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten auto
  • margin-block-end: falls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten auto
AnimationstypLä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

Festlegen von Start- und Endabständen im Block

CSS

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

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