Reduzieren von Rändern in CSS: Ein Leitfaden für Anfänger-CSS-Tutorial-php.cn

Reduzieren von Rändern in CSS: Ein Leitfaden für Anfänger

Barbara Streisand

Freigeben： 2024-09-24 18:16:02

Original

1061 Leute haben es durchsucht

Collapsing Margins in CSS: A Beginner

Einführung

Es gibt nichts Frustrierenderes, als einen Stil anzuwenden und festzustellen, dass er nicht wie erwartet funktioniert. Der kollabierende Rand ist ein Phänomen, das zu unerwarteten Styling-Ergebnissen führt. Was ist also ein kollabierender Rand und wie wirkt er sich auf die Ränder in CSS aus?

Zusammenbrechende Marge

Reduzierende Ränder ergeben sich aus der CSS-Eigenschaft „margin“, die den Abstand außerhalb eines Elements steuert. Wie der Name schon sagt, treten zusammenbrechende Ränder auf, wenn sich die Ränder benachbarter Elemente zu einem zusammenfügen oder „zusammenfallen“, anstatt sich zu addieren. Dies geschieht normalerweise zwischen Geschwisterelementen oder zwischen einem übergeordneten und einem untergeordneten Element. Wenn beispielsweise zwei Geschwisterelemente Ränder haben – eines mit einem unteren Rand von 20 Pixeln und das andere mit einem oberen Rand von 30 Pixeln – können Sie davon ausgehen, dass der Gesamtrand 50 Pixel beträgt. Aufgrund der reduzierten Ränder wird jedoch nur der größere Rand von 30 Pixel angewendet und der kleinere Rand von 20 Pixel wird reduziert.

.element1 {
    margin-bottom: 20px;
}
.element2 {
    margin-top: 30px;
}

Nach dem Login kopieren

Darüber hinaus kann es in Fällen, in denen ein übergeordnetes Element keinen Abstand oder Rand hat und sein untergeordnetes Element über einen oberen Rand verfügt, dazu kommen, dass der Rand über das übergeordnete Element hinaus „zusammenfällt“, was sich auf die Platzierung des übergeordneten Elements auswirkt.

.parent {
    margin-top: 0;
}
.child {
    margin-top: 20px;
}

Nach dem Login kopieren

Der obere 20-Pixel-Rand der .child-Datei kann außerhalb der .parent-Datei zusammenfallen, wodurch das gesamte übergeordnete Element um 20 Pixel nach unten verschoben wird.

Dies kann unerfahrene Entwickler verwirren (naja, ich wusste bis vor Kurzem nichts davon), da der resultierende Abstand möglicherweise nicht ihren Erwartungen entspricht.

Möglichkeiten, das Problem zu umgehen

Abstand oder Rand hinzufügen: Durch das Hinzufügen einer kleinen Menge Abstand oder eines Randes zum übergeordneten Element wird verhindert, dass der Rand zusammenbricht.

.parent {
    padding-top: 1px; /* or border-top: 1px solid transparent; */
}

Nach dem Login kopieren

Verwendung der Überlaufeigenschaft: Wenn die Überlaufeigenschaft des übergeordneten Elements auf etwas anderes als sichtbar gesetzt ist (z. B. Überlauf: versteckt;), kann dies verhindern, dass der Rand zusammenbricht.

.parent {
    overflow: hidden;
}

Nach dem Login kopieren

Verwenden Sie Flexbox- oder Raster-Layouts: Diese Layout-Methoden vermeiden konstruktionsbedingt Probleme mit zusammenfallenden Rändern.

Flexbox-Beispiel:

.parent {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack children vertically */
    border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    margin: 20px 0; /* Vertical margins that won't collapse */
    background-color: lightblue;
}

Nach dem Login kopieren

Rasterbeispiel

.parent {
   display: grid; /* Grid layout */
   grid-template-rows: auto auto; /* Define two rows */
   border: 1px solid #000; /* Just for visibility */
 }

.child1, .child2 {
     margin: 20px 0; /* Vertical margins */
     background-color: lightgreen;
 }

Nach dem Login kopieren

Verwenden Sie Float oder Inline-Block: Lassen Sie das untergeordnete Element schweben oder stellen Sie es auf die Anzeige ein: inline-block; verhindert auch, dass die Margen zusammenbrechen. Allerdings sehe ich Float nur noch selten, aber im Falle einer älteren Codebasis ist es gut zu wissen.

Float-Beispiel:

.parent {
    border: 1px solid #000; /* Just for visibility */
 }

 .child1, .child2 {
     float: left; /* Prevents margin collapsing */
     width: 100%; /* Full width */
     margin: 20px 0; /* Vertical margins */
     background-color: lightcoral;
 }

Nach dem Login kopieren

Beispiel für einen Inline-Block

.parent {
   border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    display: inline-block; /* Prevents margin collapsing */
    width: 100%; /* Full width */
    margin: 20px 0; /* Vertical margins */
    background-color: lightyellow;
}

Nach dem Login kopieren