CSS Box Model – kollabierende Abstände

Horizontal

Stehen zwei Boxen nebeneinander so addieren sich die Außenabstände.

Hat eine Box einen Außenabstand von 50px rechts und eine zweite Box einen Außenabstand von 50px nach links so beträgt der Abstand der zwei Boxen 100px voneinander entfernt.

Vertikal

Sind zwei Boxen übereinander angeordnet, so wird der kleinere der beiden Abstände ignoriert.

Hat eine Box einen unteren Außenabstand von 50px und eine zweite Box einen oberen Außenabstand von 50px so beträgt der Abstand der zwei Boxen 50px.

Ausnahmen

Es gibt Fälle in denen die Außenabstände nicht kollabieren. Das trifft bei Elementen wie

overflow, float, position, display

zu. Probleme entstehen in bezogen auf das CSS Box Model besonders bei Boxen mit Angaben in Prozent.