CSS-Eigenschaft margin

Probieren Sie es aus

margin: 1em;

margin: 5% 0;

margin: 10px 50px 20px;

margin: 10px 50px 20px 0;

margin: 0;

<section id="default-example">
  <div id="container">
    <div class="row"></div>
    <div class="row transition-all" id="example-element"></div>
    <div class="row"></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;
  flex-shrink: 0;
}

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

Bestandteileigenschaften

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

• margin-top
• margin-right
• margin-bottom
• margin-left

Syntax

/* apply to all four sides */
margin: 1em;
margin: -3px;

/* top and bottom | left and right */
margin: 5% auto;

/* top | left and right | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* anchor-size() values */
margin: 5% anchor-size(width);
margin: calc(anchor-size(width) / 4) 1em 0
  anchor-size(--my-anchor self-inline, 50px);

/* Keyword value */
margin: auto;

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

Die Eigenschaft margin kann mit einem, zwei, drei oder vier Werten angegeben werden. Jeder Wert ist ein <length>, ein <percentage> oder das Schlüsselwort auto. Negative Werte rücken das Element näher an seine Nachbarelemente heran, als es standardmäßig der Fall wäre.

• Wenn ein Wert angegeben wird, legt er denselben Außenabstand für alle vier Seiten fest.
• Wenn zwei Werte angegeben werden, gilt der erste Außenabstand für oben und unten, der zweite für links und rechts.
• Wenn drei Werte angegeben werden, gilt der erste Außenabstand für oben, der zweite für rechts und links, der dritte für unten.
• Wenn vier Werte angegeben werden, gelten die Außenabstände in dieser Reihenfolge für oben, rechts, unten und links (im Uhrzeigersinn).

Werte

<length>

Die Größe des Außenabstands als fester Wert.

• Bei ankerpositionierten Elementen wird die Funktion anchor-size() zu einem <length>-Wert aufgelöst, der relativ zur Breite oder Höhe des zugehörigen Ankerelements ist (siehe Festlegen des Elementaußenabstands basierend auf der Ankergröße).

<percentage>

Die Größe des Außenabstands als Prozentsatz relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch writing-mode) des enthaltenden Blocks.

auto

Der Browser wählt einen geeigneten zu verwendenden Außenabstand aus. Beispielsweise kann dieser Wert in bestimmten Fällen verwendet werden, um ein Element zu zentrieren.

Beschreibung

Diese Eigenschaft kann verwendet werden, um einen Außenabstand auf allen vier Seiten eines Elements festzulegen. Außenabstände erzeugen zusätzlichen Platz um ein Element herum, im Gegensatz zu padding, das zusätzlichen Platz innerhalb eines Elements erzeugt.

Die oberen und unteren Außenabstände haben keine Wirkung auf nicht ersetzte Inline-Elemente wie <span> oder <code>.

Horizontale Zentrierung

Sie können ein Element innerhalb seines Elternelements horizontal zentrieren, indem Sie margin: 0 auto; festlegen.

Eine gebräuchlichere Methode, ein Element horizontal zu zentrieren, besteht darin, für einen Container display: flex; und justify-content: center; festzulegen, wodurch dessen Flex-Item-Kinder zentriert werden.

Zusammenfallen von Außenabständen

Die oberen und unteren Außenabstände von Elementen werden manchmal zu einem einzigen Außenabstand zusammengefasst, der dem größeren der beiden Außenabstände entspricht. Weitere Informationen finden Sie unter Das Zusammenfallen von Außenabständen verstehen.

Formale Definition

Formale Syntax

margin = 
  <'margin-top'>{1,4}  

<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

Einfaches Beispiel

HTML

<div class="center">This element is centered.</div>

<div class="outside">This element is positioned outside of its container.</div>

CSS

.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

Weitere Beispiele

margin: 5%; /* All sides: 5% margin */

margin: 10px; /* All sides: 10px margin */

margin: 1.6em 20px; /* top and bottom: 1.6em margin */
/* left and right: 20px margin */

margin: 10px 3% -1em; /* top:            10px margin */
/* left and right: 3% margin   */
/* bottom:         -1em margin */

margin: 10px 3px 30px 5px; /* top:    10px margin */
/* right:  3px margin  */
/* bottom: 30px margin */
/* left:   5px margin  */

margin: 2em auto; /* top and bottom: 2em margin   */
/* Box is horizontally centered */

margin: auto; /* top and bottom: 0 margin     */
/* Box is horizontally centered */

Spezifikationen

Browser-Kompatibilität

Siehe auch

• margin-top, margin-right, margin-bottom und margin-left
• margin-block-start, margin-block-end, margin-inline-start und margin-inline-end
• Die Kurzschreibweisen margin-block und margin-inline
• Das Zusammenfallen von Außenabständen verstehen
• Leitfaden Einführung in das CSS-Box-Modell
• Modul CSS-Box-Modell