CSS
Ränder

Syntax

• Rand: <oben & rechts & unten & links> ;
• Rand: <oben> , <links und rechts> , <unten> ;
• Rand: <oben & unten> , <links & rechts> ;
• Rand: <oben> , <rechts> , <unten> , <links> ;
• Rand oben: <oben> ;
• Rand rechts: <rechts> ;
• Rand unten: <unten> ;
• Rand links: <links> ;

Parameter

Bemerkungen

Margin auf einer bestimmten Seite anwenden

Richtungsspezifische Eigenschaften

Mit CSS können Sie eine bestimmte Seite angeben, auf die ein Rand angewendet werden soll. Die vier Eigenschaften, die für diesen Zweck bereitgestellt werden, sind:

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

Der folgende Code würde einen Rand von 30 Pixeln auf die linke Seite des ausgewählten div anwenden. Zeige Ergebnis

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin-left: 30px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Festlegen der Richtung mit der Shorthand-Eigenschaft

Die Standard- margin Eigenschaft kann erweitert werden, um für jede Seite der ausgewählten Elemente unterschiedliche Breiten festzulegen. Die Syntax dafür ist wie folgt:

margin: <top> <right> <bottom> <left>;

Im folgenden Beispiel wird ein Rand mit einer Breite von Null auf den oberen Rand des div, ein Rand von 10 Pixeln auf der rechten Seite, ein Rand von 50 Pixeln auf der linken Seite und ein Rand von 100 Pixeln auf der linken Seite angewendet. Zeige Ergebnis

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin: 0 10px 50px 100px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Marge kollabiert

Wenn sich zwei Ränder vertikal berühren, werden sie zusammengeklappt. Wenn sich zwei Ränder horizontal berühren, kollabieren sie nicht.

Beispiel für angrenzende vertikale Ränder:

Beachten Sie die folgenden Stile und Markierungen:

div{
    margin: 10px;
}

<div>
    some content
</div>
<div>
    some more content
</div>

Sie liegen 10px auseinander, da die vertikalen Ränder über den einen und den anderen fallen. (Der Abstand ist nicht die Summe zweier Ränder.)

Beispiel für angrenzende horizontale Ränder:

Beachten Sie die folgenden Stile und Markierungen:

span{
    margin: 10px;
}

<span>some</span><span>content</span>

Sie liegen 20px auseinander, da die horizontalen Ränder nicht über den einen und den anderen fallen. (Der Abstand wird die Summe zweier Ränder sein.)

Überlappung mit verschiedenen Größen

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}

<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

Diese Elemente sind um 15 Pixel vertikal voneinander beabstandet. Die Ränder überlappen sich soweit wie möglich, der größere Abstand bestimmt jedoch den Abstand zwischen den Elementen.

Überlappender Rand Gotcha

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}

<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

Wie groß ist der Abstand zwischen den beiden Texten? (schweben, um die Antwort zu sehen)

Der Abstand beträgt 25px. Da sich alle vier Margen gegenseitig berühren, werden sie zusammenbrechen und nutzen dabei den größten Rand der vier Margen.

Wie sieht es aus, wenn wir der Markierung oben einige Rahmen hinzufügen.

div{
    border: 1px solid red;
}

Wie groß ist der Abstand zwischen den beiden Texten? (schweben, um die Antwort zu sehen)

Der Abstand beträgt 59px! Jetzt berühren sich nur die Ränder von .outer-top und .outer-bottom und sind die einzigen eingestürzten Ränder. Die verbleibenden Ränder sind durch die Ränder getrennt. Wir haben also 1px + 10px + 1px + 15px + 20px + 1px + 25px + 1px. (Die 1px sind die Grenzen ...)

Ränder zwischen übergeordneten und untergeordneten Elementen reduzieren:

HTML:

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

CSS

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

Im obigen Beispiel gilt nur die größte Marge. Sie haben möglicherweise erwartet, dass der Absatz 60px von h1 entfernt sein würde (da das div-Element eine Randspitze von 40px hat und der p eine 20px-Randspitze hat). Dies geschieht nicht, weil die Ränder zu einem Rand zusammenfallen.

Elemente auf einer Seite mit Rand horizontal zentrieren

Solange das Element ein Block ist und es einen explizit festgelegten Breitenwert hat , können Ränder verwendet werden, um Blockelemente auf einer Seite horizontal zu zentrieren.

Wir fügen einen Breitenwert hinzu, der niedriger als die Breite des Fensters ist, und die automatische Eigenschaft des Rands verteilt dann den verbleibenden Platz nach links und nach rechts:

#myDiv {
 width:80%;
 margin:0 auto;
}

In dem obigen Beispiel verwenden wir die Kurz margin Erklärung ersten Satzes 0 in den oberen und unteren Randwerte (obwohl dies einen beliebigen Wert sein könnte) und dann verwenden wir auto der Browser lassen auf der linken und rechten Randwerte den Raum automatisch zuweisen.

Im obigen Beispiel ist das #myDiv-Element auf 80% Breite festgelegt, sodass nur noch 20% übrig bleiben. Der Browser verteilt diesen Wert an die verbleibenden Seiten.

(100% - 80%) / 2 = 10%

Margin Property Vereinfachung

p {
    margin:1px;                /* 1px margin in all directions */
    
    /*equals to:*/
    
    margin:1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px 1px;
}

Ein anderes Beispiel:

p{
    margin:10px 15px;        /* 10px margin-top & bottom And 15px margin-right & left*/
    
    /*equals to:*/
    
    margin:10px 15px 10px 15px;
    
    /*equals to:*/
    
    margin:10px 15px 10px;
    /* margin left will be calculated from the margin right value (=15px) */
}

Negative Margen

Margin ist eine der wenigen CSS-Eigenschaften, die auf negative Werte gesetzt werden kann. Diese Eigenschaft kann verwendet werden, um Elemente ohne absolute Positionierung zu überlappen .

div{
  display: inline;
}

#over{
  margin-left: -20px;
}

<div>Base div</div>
<div id="over">Overlapping div</div>

Beispiel 1:

Es ist offensichtlich, anzunehmen, dass der prozentuale Wert des Randes zum margin-left und margin-right relativ zu seinem übergeordneten Element ist.

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px */
}

Dies ist jedoch nicht der Fall, wenn es zu margin-top und margin-bottom . Diese beiden Eigenschaften in Prozent beziehen sich nicht auf die Höhe des übergeordneten Containers, sondern auf die Breite des übergeordneten Containers.

So,

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px  */
    margin-top: 20%;   /* (parentWidth * 20/100) => 100px */
}