Schuer: margin-top setzen, außer beim ersten Element

Beitrag lesen

Mir treibts ja schon fast die Schamesröte ins Gesicht, aber ich hab echt keinen Plan wie man das elegant löst. Kennt CSS dafür eine Definition?

Das ist auch nicht einfach. Auf dem Papier durchaus, aber nicht in freier Wildbahn.
Deine Möglichkeiten auf den ersten Blick:

  1. hx:first-child ohne margin-top
  2. p + hx mit margin-top

Würde ich beides nicht machen, denn Inhalte wollen flexibel sein. Wird eine Bildergalerie eingebunden oder eine Dachzeile hinzugefügt oder wasauchimmer am Inhalt geändert, verhunzen deine Abstände. Für textlastige Seiten kann man solche Universalauszeichnungen machen, aber für komplexere Seiten mit diversen Inhaltselementen fährt man damit nicht gut.

Außerdem: Ich würde margin-top generell für sowas meiden und grundsätzlich in eine Richtung fließen lassen (bei mir ist das immer konsistent bottom), sonst kommen dir collapsing margins und andere Gemeinheiten viel schneller in die Quere als nötig.

Ich würde Helferelemente verwenden, um Abstände für deine Inhalte zu schaffen. Entweder umschließende Wrapper mit margin-bottom, oder, falls das zu kompliziert ist — z.B. in CMS-Umgebungen —, sogar separate Blockelemente, die keine andere Funktion haben, als Abstandshalter zu sein. Bei mir ist das ohne Scheiß meist sowas: <div class="mb1"></div>, <div class="mb2"></div> (für margin-bottom: 1em, 2em, 3em…)

Viele Grüße
_Dirk