margin-inline

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.

* Some parts of this feature may have varying levels of support.

Die margin-inline CSS Kurzschreibweise ist eine Kurzschreibweise, die sowohl die logischen inline Start- als auch End-Margen eines Elements definiert, welche in physische Margen umgewandelt werden, abhängig vom Schreibmodus des Elements, dessen Ausrichtung und Textorientierung.

Probieren Sie es aus

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Syntax

css
/* <length> values */
margin-inline: 10px 20px; /* An absolute length */
margin-inline: 1em 2em; /* relative to the text size */
margin-inline: 5% 2%; /* relative to the nearest block container's width */
margin-inline: 10px; /* sets both start and end values */
margin-inline: anchor-size(width);
margin-inline: calc(anchor-size(self-block) / 5) auto;

/* Keyword values */
margin-inline: auto;

/* Global values */
margin-inline: inherit;
margin-inline: initial;
margin-inline: revert;
margin-inline: revert-layer;
margin-inline: unset;

Diese Eigenschaft entspricht den margin-top und margin-bottom, oder den margin-right und margin-left Eigenschaften, abhängig von den definierten Werten für writing-mode, direction und text-orientation.

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

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

Werte

Die margin-inline Eigenschaft nimmt dieselben Werte wie die margin-Eigenschaft an.

Formale Definition

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

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-inline: 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-inline

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
margin-inline
anchor-size()
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

Siehe auch