Neueste Web-Entwicklung Tutorials
 

CSS Die Margen

❮ Zurück Weiter Kapitel ❯

CSS Margin Eigenschaften

Die CSS - margin Eigenschaften werden verwendet , Raum zu erzeugen , um Elemente.

Die margin Eigenschaften , die Größe des weißen Raum außerhalb der Grenze.

Dieses Element hat einen margin von 80px.

CSS Margins

Die CSS - margin Eigenschaften legen Sie die Größe des weißen Raum außerhalb der Grenze.

HinweisHinweis: Die margins vollständig transparent sind - und nicht eine Hintergrundfarbe haben!

Mit CSS haben Sie die volle Kontrolle über die margins . Es gibt CSS - Eigenschaften für die Einstellung margin für jede Seite eines Elements (oben, rechts, unten und links).

Margin - Persönliche Seiten

CSS hat Eigenschaften , für die Angabe margin für jede Seite eines Elements:

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

Alle margin Eigenschaften können die folgenden Werte haben:

  • auto - der Browser berechnet die margin
  • Länge - gibt eine margin in px, pt, cm usw.
  • % - Gibt eine margin in% der Breite des enthaltenden Elements
  • erben - gibt an, dass die margin aus dem übergeordneten Element vererbt werden sollte
HinweisAnmerkung: Es ist auch möglich, negative Werte für die Verwendung margins ;überlappt Inhalt.

Im folgenden Beispiel werden unterschiedliche margins für alle vier Seiten eines <p> Element:

Beispiel

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
Versuch es selber "

Im folgenden Beispiel kann der linke margin des übergeordneten Element vererbt werden:

Beispiel

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}
Versuch es selber "

Margin - Stenografie Immobilien

Um den Code zu verkürzen, ist es möglich , alle angeben margin Eigenschaften in einer Eigenschaft.

Die margin Eigenschaft ist eine zusammenfassende Eigenschaft für die folgenden einzelnen margin Eigenschaften:

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

Beispiel

p {
    margin: 100px 150px 100px 80px;
}
Versuch es selber "

So, hier ist, wie es funktioniert:

Wenn die margin Eigenschaft hat vier Werte:

  • margin : 25px 50px 75px 100px;
    • obere Rand 25px
    • rechten Rand ist 50px
    • untere Rand ist 75px
    • linken Rand ist 100px

Wenn die margin Eigenschaft hat drei Werte:

  • margin : 25px 50px 75px;
    • obere Rand 25px
    • rechten und linken Ränder sind 50px
    • untere Rand ist 75px

Wenn die margin Eigenschaft hat zwei Werte:

  • margin : 25px 50px;
    • 25px oberen und unteren Rand sind
    • rechten und linken Ränder sind 50px

Wenn die margin Eigenschaft hat einen Wert:

  • margin : 25px;
    • alle vier Ränder sind 25px

Die Verwendung des Autowert

Sie können die Set - margin Eigenschaft auf auto , um horizontal in dessen Container das Element zentrieren.

Das Element wird übernehmen dann die angegebene Breite, und der verbleibende Raum wird zu gleichen Teilen zwischen den linken und rechten aufgeteilt werden margins :

Beispiel

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
Versuch es selber "

Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 » Übung 4»

Alle CSS Margin Eigenschaften

Eigentum Beschreibung
margin Eine zusammenfassende Eigenschaft für die Einstellung der margin Eigenschaften in einer Erklärung
margin-bottom Legt den unteren margin eines Elements
margin-left Legt den linken margin eines Elements
margin-right Legt den rechten margin eines Elements
margin-top Stellt den oberen margin eines Elements

❮ Zurück Weiter Kapitel ❯