Ingo Siemon: margin-top: 10px; will nicht klappen

Beitrag lesen

Lieber Ingo

Warim geht das eigentlich nicht, wenn ich das in boy schreibe
also so: body {margin:0;padding:0;}
Müsste es da nicht auch an h1,h2,p usw. vererbt werden?

nein. Nicht alle Eigenschaften werden vererbt. Wäre ja auch übel, wenn Du einem DIV ein margin gibst und alle hierin gruppierten Elemente hätten dieses ebenfalls, oder?

Stimmt, das hatte ich nicht bedacht (und nicht gewusst).

Ich finde nicht. Dies machen eigentlich nur "Pixelschubser" so. ;-)

Ok, ud nso einer zu sein, will ich mir ja gerade abgewöhnen.

Gehe davon aus, daß die Browser für alle Elemente sinnvolle Voreinstellungen haben, womit eine Seite auch ganz ohne CSS vernünftig dargestellt werden kann.

Es ist nun wesentlich einfacher, nur die gewünschten Formatierungen explizit anzugeben, als sämtliche Voreinstellungen zu löschen und dann selbst neu zu setzen - zu leicht kann man da ein Element vergessen.
In Deinem Beispiel willst Du für h1, h2 und p nur Abstände von 10px nach oben und keine (gesonderten) Abstände nach unten; also definiere einfach h1, h2, p {margin 10px 0 0}.
Dabei mußt Du natürlich darauf achten, daß andere daruntergesetzte Elemente möglicherweise ohne Abstand sind (wenn z.B. ein Browser für h3 nur ein margin-bottom vorsieht). Günstiger wäre deshalb vielleicht h1, h2, p {margin:10px 0}. Der Unterschied zeigt sich dann nur bei nicht definierten Elementen sowie beim letzten so definiertem Element (für das Du dann ggfls. margin-bottom:0 gesondert angeben könntest).

Übrigens ist 10px hier kein sinnvoller Wert. Wer die Schriftgröße stark heraufsetzt, wird von dem margin kaum noch etwas sehen und wer sie herabsetzt, hat übermäßig große Abstände. Verwende besser em, wobei Du natürlich drauf achten mußt, daß diese Einheit sich auf die Schriftgröße bezieht und Du für gleiche Abstände unterschiedliche Werte passend zur Schriftgröße angeben mußt. Also z.B. h2 {font-size:1em; margin:0.75em 0;} und h1 {font-size:1.5em; margin:0.5em 0;} ergibt gleiche Abstände, die zu jeder Schriftgröße passen.

Ich habe gerade mal alle margins weggelassen, um mir das mal nur
mit den "sinnvollen" Voreinstellungen der Browser anzusehen.
Dabei fallen mir 2 Dinge auf:

1.) h1, h2 und p scheinen da alle die gleichen Voreinstellungen zu haben.
Ich meinte mal gelesen zu haben, dass die Überschriften
einen etwas größeren Abstand haben, bin mir aber nicht sicher.

2.) Firefox passt die Abstände auch bei Schriftgrad-Änderung
immer schön mit an. Opera macht das auch, wobei dieser dann
aber sogar die Angabe width: 508px; ignoriert.
Und der IE passt die vertikalen Abstände NICHT mit an,
wenn man den Schrtgrad im Browser ändert.

Das ist ja fürchterlich ;-(
Sollte man sich aufgrund dieses ganzen durcheinanders vielleicht
dann doch lieber ein Layout ausdenken, was vollkommen auf
Breitanangaben verzichtet?

Gruß
Ingo