Paragraph-Margin Bleeding

[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;}