CSS lernen - Den Außenabstand (Margin) definieren.

CSS Grundlagen

CSS Einführung CSS Erste Schritte CSS Syntax CSS Selektoren CSS Farben CSS Hintergrund CSS Schriften CSS Text CSS Links CSS Listen CSS Tabellen

CSS Box Modell

CSS Box Model CSS Dimensionen CSS Padding CSS Border CSS Margin

Der Außenabstand eines Elements

Mit margin können Sie den Abstand um den Rahmen (Border) eines Elements festlegen. Der Außenabstand eines Elements wird nicht von background-color beeinflusst, er ist immer transparent. Wenn das übergeordnete Element jedoch die Hintergrundfarbe hat, ist diese auch im Margin-Bereich sichtbar.

Einstellen von Abständen für einzelne Seiten

ie können die Abstände für die einzelnen Seiten eines Elements genauso wie beim Padding angeben: Es gibt also margin-top für oben, margin-right für rechts, margin-bottom für unten, und margin-left für die linke Seite eines Elements. Folgendes Beispiel zeigt die Defintion der margin-Werte:

div {
            margin-top: 50px;
             margin-bottom: 100px;
}

CSS Margin kann mit den folgenden Werten angegeben werden:

Länge - gibt das Margin in px, em, rem, pt, cm usw. an.
% - gibt eine Margin-Breite in Prozent (%) der Breite des enthaltenden Elements an.
auto - der Browser berechnet einen geeignete Außenabstand.
inherit - gibt an, dass der Wert vom übergeordneten Element geerbt werden soll.

Auswirkung von Margin auf das Layout

Beim Erstellen von Webseiten-Layouts führt auch das Hinzufügen von margin zu unerwarteten Ergebnissen. Dies liegt daran, dass margin-Werte genau wie bei padding und border zur Breite und Höhe der vom Element erzeugten Box addiert werden (wie wir im Kapitel CSS-Boxmodell gelernt haben).

Wenn wir beispielsweise die Breite eines <div>-Elements auf 100% Bildschirmbreite setzen und dazu ein margin von 50px setzen, wird eine horizontale Scrolleiste angezeigt, da der <div>-Container plötzlich eine Breite von 100% Bildschirmbreite + 100px Margin hat.

div {
    width: 100%;
    margin: 25px;
}

Leider kann dies nicht wie beim Padding durch box-sizing behoben werden. Als Workaround können Sie die Breite aber durch width:calc(100%-100px); berechnen.

Anwendung der Kurzschreibweise

Auch die CSS Margin Eigenschaft besitzt eine Kurzform. Diese wird genutzt um zu vermeiden, dass das der Margin-Wert jeder Seite separat festgelegt werden muss (dh. margin-top, margin-right, margin-bottom und margin-left).

Schauen wir uns die folgenden Beispiele an, um zu verstehen, wie die Kurzform angewendet werden kann

div {
    margin: 50px; 
    /* Anwendung für alle 4 Seiten */
}
h1 {
    margin: 25px 75px; 
    /* 25px oben und unten | 75px links und rechts */
}
h2 {
    margin: 25px 50px 75px; 
    /* oben | horizontal | unten */
}
h3 {
    margin: 25px 50px 75px 100px; 
    /* Uhrzeigersinn: top | right | bottom | left */
}

Diese Kurzschreibweise kann einen, zwei, drei oder vier durch Leerzeichen getrennte Werte annehmen.

Wenn ein Wert angegeben wird, wird er auf alle vier Seiten angewendet.
Wenn zwei Werte angegeben werden, wird der erste Wert auf die obere und untere Seite und der zweite Wert auf die rechte und linke Seite der Elementbox angewendet.
Wenn drei Werte definiert sind, ist der erste Wert für oben bestimmt, der zweite Wert wird für die rechte und linke Seite angewendet, und der letzte Wert wird für unten genutzt.
Wenn vier Werte angegeben sind, werden sie in der angegebenen Reihenfolge auf die obere , rechte , untere und linke Seite der Elementbox angewendet. Denken Sie bei der Verwendung am besten immer an einen Uhrzeiger

Es wird empfohlen, die Kurzschreibweise zu verwenden. Dies hilft Ihnen, Zeit zu sparen, da Sie zusätzliche Eingaben vermeiden und der CSS-Code einfacher zu lesen ist.

CSS Horizontale Zentrierung durch margin:auto

Der auto-Wert für die Eigenschaft margin weist den Webbrowser an, den Außenabstand automatisch zu berechnen. Dies wird häufig verwendet, um ein Element in einem größeren Container horizontal zu zentrieren. Im folgenden Beispiel sehen Sie wie margin:auto; angewendet wird:

div {
    width: 300px;
    background: gray;
    margin: 0 auto;
}

Die obigen Stilregeln lassen das <div>-Element 300 Pixel des gesamten verfügbaren horizontalen Platzes einnehmen, Der verbleibende Platz wird gleichmäßig auf den linken und rechten Rand aufgeteilt.

Zurück zu: CSS Border (Rahmen)

Weiter zu: Konturen im CSS definieren

CSS lernen - Den Außenabstand (Margin) eines Elements mit CSS festlegen