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.