margin-top setzen, außer beim ersten Element

[Encoder]

Hi ihr
Ich habe dieses HTML vor mir:
Überschrift
Absatz
Absatz

Überschrift
Absatz
Absatz

Überschrift
Absatz
....

Zwischen den Absätzen und den nachfolgenden Überschriften soll ein bisschen Platz sein. Allerdings nicht als margin-top beim h1, denn dann wird das erste h1 auch nach unten gerutscht und das sieht sch... aus.
Muss ich da jetzt wirklich dem ersten h1 einen anderen Wert für margin-top gebe, oder jedem letzten p ein größeres margin-bottom?

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?

[Der Martin]

Hallo,

Überschrift
Absatz
Absatz

Überschrift
Absatz
Absatz

Überschrift
Absatz
....

Zwischen den Absätzen und den nachfolgenden Überschriften soll ein bisschen Platz sein. Allerdings nicht als margin-top beim h1, denn dann wird das erste h1 auch nach unten gerutscht und das sieht sch... aus.

das muss nicht sein; es gibt ja den Adjacent Sibling Combinator. Wie wär's damit:

p + h1  
 { margin-top: 0.5em;  
 }

Muss ich da jetzt wirklich dem ersten h1 einen anderen Wert für margin-top gebe, oder jedem letzten p ein größeres margin-bottom?

Nööö ...

So long,
 Martin

[Gunnar Bittersmann]

@@Encoder:

nuqneH

Allerdings nicht als margin-top beim h1, denn dann wird das erste h1 auch nach unten gerutscht und das sieht sch... aus.

h1:not(:first-child) { margin-top: 2em } verstehen wohl alle modernen Browser.

h1 { margin-top: 2em }  
h1:first-child { margin-top: 0 }
~~~ verstehen sogar alte IEs.  
  
  

> Muss ich da jetzt wirklich dem ersten h1 einen anderen Wert für margin-top gebe  
  
Was ist das Problen dabei?  
  

> oder jedem letzten p ein größeres margin-bottom?  
  
Würde ich nicht machen. Ein Block könnte ja auch mit etwas anderem aufhören als mit einem Textabsatz (Liste, Tabelle, Grafik, …).  
  
Und nein, musst du nicht. Du könntest auch `html`{:.language-css} oder `body`{:.language-css} margin-top mit negativem Wert geben.  
  
Apropos Blöcke: Dafür gibt’s Markup:  
  
~~~html
<section>  
  <h1>Überschrift</h1>  
  <p>Absatz</p>  
  <p>Absatz</p>  
</section>  
<section>  
  <h1>Überschrift</h1>  
  <p>Absatz</p>  
  <p>Absatz</p>  
</section>

Dann könnte auch section margin-bottom bekommen.

Qapla'

[Encoder]

Muss ich da jetzt wirklich dem ersten h1 einen anderen Wert für margin-top gebe
Was ist das Problen dabei?

Da müsste ich dann die Position der Überschrift beachten um ihr den Style zu verpassen. Ist zwar nicht schwierig und wenn man sich sein Werk ansieht merkt man auch wenn man was vergessen hat, aber so "sauber" sah mir das nicht aus.

Ich werd mir die ganzen Vorschläge ansehen, section, Selektoren und so weiter.

Durch <section> inspiriert bin ich auf der Suche, wie ich rausfinden kann oder der verwendete Browser meine Seite so darstellt wie es gewünscht ist. Mir wäre schon geholfen wenn die meist verbreiteten alten Krücken aufgespürt werden könnten. Dann könnte ich einen Hinweis auf der Seite anzeigen, dass die wahrscheinlich nicht so aussieht wie gedacht.
Irgendwelche irre Ideen mit JavaScript und Browserweichen die das CSS verfielfachen möchten wir da keine drin haben.
Hat da jemand eine geniale Idee?

[Alex]

Hallo!

h1:not(:first-child) { margin-top: 2em } verstehen wohl alle modernen Browser.

h1 { margin-top: 2em }

h1:first-child { margin-top: 0 }

>   

Oder:  
`h1 ~ h1 { margin-top: 2em }`{:.language-css}  
Geht auch in Browsern, die noch kein :not können (IE 7, 8) und ist ein bisschen kürzer als die Variante mit dem :first-child.  
  
Generell finde ich aber die Lösung mit den sections am besten, weil die das IMHO sinnvollste Markup für diesen Fall sind.  
  
Viele Grüße,  
Alex

[Schuer]

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

[Gunnar Bittersmann]

@@Schuer:

nuqneH

sonst kommen dir collapsing margins und andere Gemeinheiten viel schneller in die Quere als nötig.

Mir kommen collapsing margins eher freundlich gesinnt vor als gemein.

Bei mir ist das ohne Scheiß meist sowas: <div class="mb1"></div>, <div class="mb2"></div> (für margin-bottom: 1em, 2em, 3em…)

O je, präsentationsbezogenes Markup. Warum nicht gleich Inline-Styles?

Qapla'

[Schuer]

Mir kommen collapsing margins eher freundlich gesinnt vor als gemein.

Das liegt an deinem positiven Gemüt. Auch die Inder an der Fischerinsel schienen dir gegenüber sehr wohlwollend zu sein.

O je, präsentationsbezogenes Markup. Warum nicht gleich Inline-Styles?

Ich habe schon robuste Websites gebaut, als andere Leute noch Clearfixes verwendet haben ;)

Viele Grüße
_Dirk

[Tabellenkalk]

Hallo

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…)

nimmt man dafür nicht <br>, <br><br> bzw. <br><br><br>?

Gruß
Kalk