Rahmenmodell: CSS Außenabstandskollision
- Vorherige Seite CSS Außenabstand
- Nächste Seite Übersicht über die CSS-Positionierung
Außenabstandskollision bezieht sich darauf, dass sich zwei vertikale Außenabstände beim Treffen zu einem Außenabstand verschmelzen.
Die Höhe des verschmolzenen Außenabstands ist gleich dem größeren der beiden sich verschmelzenden Außenabstände.
Außenabstandskollision
Außenabstandskollision (Überlagerung) ist ein recht einfaches Konzept. Aber im praktischen Layout von Webseiten kann es viele Verwirrungen verursachen.
Einfach gesagt, Außenabstandskollision bezieht sich darauf, dass sich zwei vertikale Außenabstände beim Treffen zu einem Außenabstand verschmelzen. Die Höhe des verschmolzenen Außenabstands ist gleich dem größeren der beiden sich verschmelzenden Außenabstände.
Wenn ein Element über einem anderen Element erscheint, verschmelzen der untere Außenabstand des ersten Elements mit dem oberen Außenabstand des zweiten Elements. Sehen Sie sich das folgende Diagramm an:
Wenn ein Element in einem anderen Element enthalten ist (angenommen, es gibt keine Innenabstände oder Umrandungen, die den Außenabstand trennen), verschmelzen auch ihre oberen und/oder unteren Außenabstände. Sehen Sie sich das folgende Diagramm an:
Obwohl es etwas seltsam aussieht, können Außenabstände sogar mit sich selbst verschmelzen.
Angenommen, es gibt ein leeres Element, das einen Außenabstand hat, aber keine Umrandung oder Füllung. In diesem Fall treffen sich der obere Außenabstand und der untere Außenabstand, und sie verschmelzen:
Wenn dieser Außenabstand auf den Außenabstand eines anderen Elements trifft, tritt ebenfalls eine Kollision auf:
Das ist der Grund, warum eine Reihe von Absatzelementen so wenig Raum einnimmt, da alle Außenabstände zusammengefasst werden, um einen kleinen Außenabstand zu bilden.
Die Außenabstandskollision mag auf den ersten Blick seltsam erscheinen, ist aber tatsächlich sinnvoll. Nehmen wir eine typische Textseite, die aus mehreren Absätzen besteht. Der Raum über dem ersten Absatz entspricht dem oberen Außenabstand des Absatzes. Ohne Außenabstandskollision wäre der Außenabstand zwischen allen nachfolgenden Absätzen die Summe des benachbarten oberen und unteren Außenabstands. Dies bedeutet, dass der Raum zwischen den Absätzen doppelt so groß wäre wie am oberen Ende der Seite. Wenn eine Außenabstandskollision auftritt, werden der obere und untere Außenabstand des Absatzes zusammengefasst, so dass die Entfernungen überall gleich sind.
Anmerkung:Nur die vertikalen Außenabstände von Blöcken in der normalen Dokumentflussreihenfolge werden gekollidiert. Die Außenabstände zwischen Inline-Boxen, Floating-Boxen oder absolut positionierten Boxen werden nicht gekollidiert.
- Vorherige Seite CSS Außenabstand
- Nächste Seite Übersicht über die CSS-Positionierung
