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 ⁨April 2021⁩.

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

Die margin-inline CSS Shorthand-Eigenschaft ist eine Shorthand-Eigenschaft, die sowohl den logischen Inline-Anfang als auch die Endmargen eines Elements definiert. Diese werden in physische Margen umgewandelt, abhängig vom Schreibmodus, der Richtung und der Textorientierung des Elements.

Probieren Sie es aus

margin-inline: 5% 10%;
writing-mode: horizontal-tb;

margin-inline: 10px 40px;
writing-mode: vertical-rl;

margin-inline: 5% 10%;
writing-mode: horizontal-tb;
direction: rtl;

<section id="default-example">
  <div id="container">
    <div class="col">One</div>
    <div class="col transition-all" id="example-element">Two</div>
    <div class="col">Three</div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  color: white;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
  unicode-bidi: bidi-override;
}

Aufgeschlüsselte Eigenschaften

Diese Eigenschaft ist eine Shorthand 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 Werten, die für writing-mode, direction und text-orientation definiert sind.

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

Wenn ein Wert angegeben wird, gilt derselbe Margin für Anfang und Ende.
Wenn zwei Werte angegeben werden, gilt der erste Margin für den Anfang, der zweite für das Ende.

Werte

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

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `margin-inline-start`: `0` `margin-inline-end`: `0`
Anwendbar auf	wie bei `margin`
Vererbt	Nein
Prozentwerte	hängt vom Layoutmodell ab
Berechneter Wert	wie 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`
Animationstyp	Lä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

Festlegung der Margen für den Inline-Anfang und das Inline-Ende

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

Siehe auch

CSS Logische Eigenschaften und Werte
Die zugeordneten physischen Eigenschaften: margin-top, margin-right, margin-bottom, und margin-left
writing-mode, direction, text-orientation

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden