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

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;
}

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;
}

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; */
}

• 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;
}

• 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;
}

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;
 }

• 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;
 }

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;
}

Abschluss

Das Verstehen der Randreduzierung kann wesentlich zu einem konsistenten und erwarteten Abstand in Ihrem Weblayout beitragen, insbesondere wenn Sie mit Elementen auf Blockebene arbeiten. Es ist erwähnenswert, dass Inline-Elemente wie , , usw. aufgrund ihres im Vergleich zu Elementen auf Blockebene unterschiedlichen Verhaltens bei der Generierung vertikaler Ränder im Allgemeinen nicht von der Randreduzierung betroffen sind. Das Kollabieren von Rändern stellt vor allem bei Elementen auf Blockebene wie

,

,

und anderen eine Herausforderung dar, da diese möglicherweise vertikale Ränder haben, die miteinander interagieren.

Referenzen

• Mdn
• w3Schools

Das obige ist der detaillierte Inhalt vonReduzieren von Rändern in CSS: Ein Leitfaden für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css Float if for Property this display overflow margin padding border

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn