Beim Layouten von CSS-Webseiten werden Sie auf viele seltsame Probleme stoßen. Diese Probleme können durch Browserfehler oder unzureichendes Verständnis der CSS-Eigenschaften verursacht werden. In diesem Artikel wird das Problem der CSS-Margin-Overlay behandelt. Randzusammenführung bedeutet, dass zwei vertikale Ränder, wenn sie zusammentreffen, einen einzigen Rand bilden. Die Höhe des zusammengeführten Randes entspricht der größeren der Höhen der beiden zusammengeführten Ränder. Das Zusammenführen (Überlappen) von Rändern ist ein ziemlich einfaches Konzept. Wenn es jedoch um die Gestaltung von Webseiten geht, kann es in der Praxis zu großer Verwirrung kommen. Wenn ein Element in einem anderen Element enthalten ist (vorausgesetzt, es gibt keinen Abstand oder Rand, der die Ränder trennt), werden auch ihre oberen und/oder unteren Ränder zusammengeführt. Bitte schauen Sie sich das Bild unten an: Obwohl es seltsam erscheinen mag, können Ränder sogar mit sich selbst verschmelzen. Angenommen, Sie haben ein leeres Element, das Ränder, aber keinen Rand oder Abstand hat. In diesem Fall treffen der obere und der untere Rand aufeinander und verschmelzen: Wenn dieser Rand auf den Rand eines anderen Elements trifft, wird er ebenfalls zusammengeführt: Aus diesem Grund nimmt eine Reihe von Absatzelementen sehr wenig Platz ein, da alle ihre Ränder zu einem kleinen Rand zusammengeführt werden. Das Zusammenführen von Margen mag auf den ersten Blick etwas seltsam erscheinen, aber in der Praxis macht es Sinn. Nehmen Sie zum Beispiel eine typische Textseite, die aus mehreren Absätzen besteht. Der Abstand über dem ersten Absatz entspricht dem oberen Rand des Absatzes. Ohne Randzusammenführung entsprechen die Ränder zwischen allen nachfolgenden Absätzen der Summe der angrenzenden oberen und unteren Ränder. Das bedeutet, dass der Abstand zwischen den Absätzen doppelt so groß ist wie der obere Rand der Seite. Bei der Randverschmelzung werden die oberen und unteren Ränder zwischen den Absätzen zusammengeführt, sodass die Abstände überall konsistent sind. Die Randzusammenführung erfolgt nur für vertikale Ränder von Blockkästen im normalen Dokumentenfluss. Ränder zwischen Inline-Boxen, schwebenden Boxen oder absolut positionierten Boxen werden nicht zusammengeführt.
Wenn ein Element über einem anderen Element erscheint, ist dies die untere Außenkante des ersten Elements
