Randabstand (Margin)

Randabstand: Die Eigenschaft margin

Die zusammenfassende Eigenschaft margin gibt die Breite der Marginbox eines Elements an. Die Eigenschaften margin-top, margin-right, margin-bottom und margin-left setzen die Breite entsprechend nur für eine Seite der Marginbox.

Werte	<Länge>,<Prozent>, `auto`, inherit
Initialwert	`0`
Vererbung	nein
Anwendung	Blockelemente, Inline-Elemente nur eingeschränkt

Negative Werte sind erlaubt; ein Element mit der Deklaration margin-left: -10px; hat einen negativen Abstand von 10 Pixeln und wird um diese Länge nach links verschoben.

Die Angabe in Prozent wird relativ zur Breite des umschließenden Blocks der erzeugenden Box berechnet, auch für margin-top und margin-bottom.

Wenn Sie den Wert auto angeben, wird der Abstand automatisch berechnet.

Wird für margin nur ein Wert angegeben, gelten dieselben Regeln wie für die Eigenschaft padding (siehe Kapitel 7.5.3).

Zusammenfallende Randabstände

Vertikale Randabstände werden im Gegensatz zu horizontalen Abständen im Allgemeinen nicht addiert, sondern fallen zusammen, wobei der größere Abstand »gewinnt«. Der Abstand der beiden folgenden Elemente zueinander beträgt somit nicht 50, sondern nur 30 Pixel:

<p style="margin-bottom: 30px;">Absatz</p>

<p style="margin-top: 20px;">Absatz</p>

Aber nicht nur die vertikalen Ränder benachbarter Boxen fallen zusammen, sondern auch Ränder verschachtelter Boxen. Aus diesem Grund liegt das div-Element im folgenden Listing 7.1 nicht direkt an der Oberkante des Browserfensters an, sondern wird mit einem Abstand von 20 Pixeln dargestellt, den es von seinem Kindelement p »übernimmt« (siehe Abbildung 7.14).

Ränder fallen nur dann zusammen, wenn sie durch keine Polster- oder Rahmenbereiche voneinander getrennt sind, das heißt, wenn Padding- und Borderbox auf 0 gesetzt sind. Da der Wert der Eigenschaft padding-bottom des div-Elements ungleich 0 ist, fallen die unteren Randabstände nicht zusammen.

Vertikale Ränder zwischen einer fließenden und einer nicht fließenden Box sowie von absolut und relativ positionierten Boxen fallen nicht zusammen. Mehr dazu in Kapitel 7.7 »Positionierung«.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Zusammenfallende Randabstände</title>

    <style type="text/css">
      /* <![CDATA[ */
      * {
        margin: 0;
        padding: 0;
      }
      div {
        color: black;
        background-color: lime;
        padding-bottom: 1px;
      }
      p {
        color: black;
        background-color: yellow;
        margin: 20px;
      }
      /* ]]> */
    </style>
  </head>

  <body>
    <div>
      <p>Lorem ipsum in eam tation numquam deseruisse. Sea eu eripuit deterruisset, duo ei fugit minim minimum, nam probo fabulas praesent ex. In adhuc adipisci pri, pri id autem semper. Duis tollit in vim. Ei vim nonumy epicuri, natum democritum te est.</p>
    </div>
  </body>
</html>

Zusammenfallende Randabstände

Abb. 7.14: Zusammenfallende Randabstände

Browserunterstützung

Die Eigenschaft margin wird von allen modernen Browsern unterstützt mit folgenden Einschränkungen:

Internet Explorer: Bis zur Version 7 versteht der IE den Wert inherit nicht.

http://jendryschik.de

UX, Usability und Webstandards

Randabstand: Die Eigenschaft margin

Zusammenfallende Randabstände

Browserunterstützung