margin CSS-Eigenschaft

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;
}

Bestandteil-Eigenschaften

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 values */
margin: auto;

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

Die margin-Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden. Jeder Wert ist ein <length>, ein <percentage>, oder das Schlüsselwort auto. Negative Werte ziehen das Element näher zu seinen Nachbarn, als es standardmäßig der Fall wäre.

• Wenn ein Wert angegeben ist, gilt dieser für alle vier Seiten.
• Wenn zwei Werte angegeben sind, gilt der erste für oben und unten, der zweite für links und rechts.
• Wenn drei Werte angegeben sind, gilt der erste für oben, der zweite für rechts und links, der dritte für unten.
• Wenn vier Werte angegeben sind, gelten die Werte für oben, rechts, unten und links in dieser Reihenfolge (im Uhrzeigersinn).

Werte

<length>

Die Größe des Randes als fester Wert.

• Bei ankerpositionierten Elementen löst die Funktion anchor-size() in einen <length> Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe Festlegen des Randes basierend auf der Ankergröße).

<percentage>

Die Größe des Randes 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 Rand aus. Beispielsweise kann dieser Wert in bestimmten Fällen verwendet werden, um ein Element zu zentrieren.

Beschreibung

Diese Eigenschaft kann verwendet werden, um einen Rand auf allen vier Seiten eines Elements einzustellen. Ränder schaffen zusätzlichen Platz um ein Element herum, im Gegensatz zu padding, das zusätzlichen Platz innerhalb eines Elements schafft.

Die oberen und unteren Ränder haben keine Auswirkung auf nicht-ersetzte Inline-Elemente, wie zum Beispiel <span> oder <code>.

Horizontale Zentrierung

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

Eine gebräuchlichere Methode, ein Element horizontal zu zentrieren, ist es, display: flex; und justify-content: center; auf einem Container festzulegen, wodurch seine Flex-Element-Kinder zentriert werden.

Rand-Kollaps

Die oberen und unteren Ränder von Elementen werden manchmal zu einem einzigen Rand zusammengefasst, der dem größeren der beiden Ränder entspricht. Weitere Informationen finden Sie unter Meisterung der Randzusammenführung.

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
• Kurzschreibweisen margin-block und margin-inline
• Meisterung der Randzusammenführung
• Einführung in das CSS-Box-Modell Leitfaden
• CSS-Box-Modell Modul