Paragraph-Margin Bleeding

[Anne Kaffeekanne]

Hallo,

kurze Frage: Was geht eigentlich mit den Paragraphen ab? :D

Wie in den angeführten Snippets zu sehen ist, sind <p>s in <section>s gegeben, warum "bleeden" die Paragraphen außerhalb ihres Parent-Elements?

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

Anmerkung: Ich könnte es nachvollziehen, würden die <section> Elemente durch die <p>-Margins größer, was aber nicht der Fall zu sein scheint... Anhand background-color: yellow; sieht man schön die Lücke, die sich zwischen den beiden <section> Elementen auftut (verursacht durch <p>-Margin).

Code-Snippet CSS:

body {
	background-color: grey;
}
main > section {
	background-color: yellow;
	margin: 0;
	padding: 0;
}



/* Nur so funktioniert's: */
/*
main > section > p {
	margin: 0;
}
*/

Code Snippet HTML:

<main>
	<section>
		<p>Content...</p>
	</section>
	<section>
		<p>Content...</p>
	</section>
</main>

Danke! LG.