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.

[ursus contionabundo]

*Anmerkung: Ich könnte es nachvollziehen,

Unter "Paragraph-Margin Bleeding" habe ich in der "allwissenden Müllhalde" nichts gefunden, die Glaskugel will auch nichts verständliches ausgeben und der veröffentlichte Code verschafft mir keinen Zugang zu dem Problem. Wie wäre es damit, eine, das Problem sichtbar machende Seite zu erstellen, auf einen Webserver zu legen und deren URL unter "problematische Seite" zu posten? Dann könnte ich das Problem vielleicht nachvollziehen.

Hint: Bei dem Versuch, eine das Problem sichtbar machende Seite zu erstellen, ist schon oft der Fehler und/oder die Lösung vom Fragenden selbst gefunden worden.

[MudGuard]

Hi,

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?

collapsing margins

cu,
Andreas a/k/a MudGuard

[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.

[djr]

Mein Umgang mit collapsing margins ist meist der, dass ich bei Elementen zur Textstrukturierung mit dem margin-top arbeite, sofern dieses Element nicht erstes Kind ist.

Um die Spezifität des Selektors nicht hoch zu schrauben empfehle ich:

*+p {
  margin-top: 1rem;}

statt

p:not(:first-child) {
  margin-top: 1rem;}

Der Weißraum über und unter dem Text steuere ich dann über den padding (oder margin) des Containers (z.B. des <article>)

ein Beispiel:

* {
    margin: 0;}

*+p,
*+ul {
    margin-top: 1rem;}

*+h2 {
    margin-top: 2rem;}

*+h3 {
    margin-top: 1.5rem;}

article {
    padding-bottom: 2rem;
    padding-top: 2rem;}

So sind spezifischere Regeln auch einfach umzusetzen:

h2+h3 {
    margin-top: 0;}

[Gunnar Bittersmann]

@@djr

Mein Umgang mit collapsing margins ist meist der, dass ich bei Elementen zur Textstrukturierung mit dem margin-top arbeite, sofern dieses Element nicht erstes Kind ist.

s.a. Axiomatic CSS and Lobotomized Owls

LLAP 🖖

[ottogal]

s.a. Axiomatic CSS and Lobotomized Owls

Sehr erhellender Artikel - Danke für den Link!