Paragraph-Margin Bleeding

[djr]

Wie @MudGuard schon sagt ist das Stichwort collapsing margins.

Und vor allem: Wie kann ich <section> beibringen: "Horch zu, <section>, sei bitte so groß wie dein Inhalt inklusive ALLER seiner Werte"?

Möglichkeit 1: Der Margin von grid- bzw. flex-items kollabiert nicht: section {display:grid;}. Entsprechend muss dann ggf. der margin-top und margin-bottom aller grid- bzw. flex-items angepasst werden.

Möglichkeit 2: sich auf margin-top oder margin-bottom beschränken. Dann "bleedet" es nur noch in eine Richtung aus, in diesem Fall, der section.

Möglichkeit 3: der Section ein border größer 0 geben.

Möglichkeit 4: der Section ein padding größer 0 geben.