CSS: margin > 0 reisst Lücken ins Layout?

[baumeister]

ok, ich muss mich wohl detaillierter ausdrücken:

wir reden von zwei ebenen, die erste sind die divs, die zweite die in den divs enthaltenen elemente. wenn nun die zweite ebene größere außenabstände hat als die erste, lappt der inhalte über den rand der divs -> das erzeugt die brüche. in deinem konkreten fall sorgt beispielsweise p { margin-bottom:50px; } für den abstand zum footer, du willst ja zwingend diesen abstand haben.

der denkfehler liegt nun darin, dass du diesen abstand stattdessen in der ersten ebene mit padding erzeugen müsstest -> so hast du auch den abstand, aber ohne unterbrechung der divs.

klar soweit?

baumeister

edit: ich sehe gerade deinen neuen ansatz. das geht zwar auch (weil du die erste ebene zwingst, am ende noch abstand zu generieren), ich finde es aber eleganter, wenn man die abstände zwischen header -content - footer da erzeugt, wo sie stattfinden sollen, nämlich in den divs selbst.

 

[2nd]

Bingo, ich habe es endlich kapiert und finde es natürlich auch sinnvoller. Ein padding: 20px 20px; im DIV macht natürlich mehr Sinn als jedes Element einzeln mit den 20px auszuzeichnen, zumal es dann auch zu Fehlern kommen kann.

Danke

Eine Frage noch: Der Abstand von H1 zu p - logischerweise generiere ich den mit h1 {margin-bottom: 10px;} anstatt mit padding im h1 Tag der gar in dem p Tag oder?

2nd

 

[baumeister]

Eine Frage noch: Der Abstand von H1 zu p - logischerweise generiere ich den mit h1 {margin-bottom: 10px;} anstatt mit padding im h1 Tag der gar in dem p Tag oder?

klar. die abstände (egal ob padding oder margin) von p, h1, ul usw. definierst du im element selber. du musst nur darauf achten, dass das letzte element in einem div kein größeres margin-bottom als der div selbst padding-bottom hat, dann kannst du bei den divs immer mit margin:0 abstand arbeiten und hast keine brüche.

gruß baumeister

 

[2nd]

Alles klar!

Hmm, irgendwie so mhhh... ich programmiere ein wenig in PHP und auch Actionscript und komme eigentlich gut zurecht - aber CSS mit allen Facetten ist nicht gerade trivial, wie ich finde. Irre ich (oder bin einfach zu doof )?

2nd

 

[pichfl]

zu meiner Lösung: durch das zusätzliche Padding (egal wie klein, 0,01 scheint wohl nicht für alle Browser zu klappen, die Genauigkeit hört für viele beim Zehntel anscheindend aufm daher ist wie 2nd rausgefunden hat wohl 0,1em die beste Lösung) fällt jede Form von Collapsing Margins ins Wasser, zumindest wenn es um die Ränder der Box geht, die dieses Minimal-Padding oben und unten hat (links und Rechts fällt ja nix zusammen soweit ich weiß).

Und eleganter, als erstmal in einem Radikalschlag alles niederzumachen isses meiner Meinung auch. Vor allem weil die Methode bei Formen und Eingabeelementen machmal Ärger macht.


zu 2nd:
CSS ist nicht trivial, nein. Ich glaube für manche isses eine Art Glauben.
Aber wenns richtig angewendet ist, ist es auf alle Fälle eine sichere und gute Lösung, um Layouts in einer stark komprimierten Form festzulegen.