nicht angemeldet
martin-top fehlt - was bedeutet offset?
Hallo,
irgendein - in meinem Beispiel entscheidendes - Detail ist mir vermutlich entgangen. In dem folgendem simplen Beispiel habe ich eine Überschrift in einem <div> eingefügt. Diese Überschrift hat einen margin-top (50px), der leider nicht erscheint.
Firebug zeigt mir für diese 50px ein "offset" an. Was habe ich übersehen bzw. was bedeutet dieses Offset und warum erscheint mein margin-top nicht?
Das Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Problem mit einem margin-toptitle>
</head>
<body>
<div style="margin: 0; padding: 0; background-color: yellow;
width: 500px; height: 500px;">
<h1 style="margin: 50px 0; background-color: lime;">Überschrift 1</h1>
<div style="background-color: lime;">und was darunter, ohne eigene
Abstände.</div>
</div>
</body>
</html>
Vielen Dank und viele Grüße
Daniel
-
Yerf!
Firebug zeigt mir für diese 50px ein "offset" an. Was habe ich übersehen bzw. was bedeutet dieses Offset und warum erscheint mein margin-top nicht?
Die Begründung heißt "collapsing Margins". Der top-margin der H1 wird mit dem top-margin des Eltern-DIVs zusammengefasst und dem DIV zugerechnet, deswegen erscheint er nur als Offset bei der Überschrift.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Hi,
danke für deine schnelle Antwort!
Die Begründung heißt "collapsing Margins". Der top-margin der H1 wird mit dem top-margin des Eltern-DIVs zusammengefasst und dem DIV zugerechnet, deswegen erscheint er nur als Offset bei der Überschrift.
Hm, aber warum kommt dann überhaupt kein margin? Ich hatte bisher gedacht, dass "collapsing" bedeutet, dass der größere margin genutzt wird?!
Und warum ist das dann bei folgendem Beispiel wieder anders?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Problem mit 100% Höhe</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> html,body { margin: 0; padding: 0; height: 100%; width: 100%; } </style> </head> <body style="background-color: yellow;"> <h1 style="margin-top:50px;">Überschrift 1</h1> </body> </html>Viele Grüße
Daniel-
Yerf!
Hm, aber warum kommt dann überhaupt kein margin? Ich hatte bisher gedacht, dass "collapsing" bedeutet, dass der größere margin genutzt wird?!
Der Margin wird aber grundsätzlich dem Elternelement zugerechnet.
Und warum ist das dann bei folgendem Beispiel wieder anders?
Ist es nicht, wie ein
html {backgorund-color:red}zeigt... der margin wird dem body-Element zugeordnet.Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Hi,
Der Margin wird aber grundsätzlich dem Elternelement zugerechnet.
Ok, habe ich glaub ich verstanden. Aber in welchem Fall würde denn der "Rand" von <h1> mit dem von <body> zusammen fallen, so wie in meinem ersten Beispiel
Vielen Dank und viele Grüße
Daniel
-
-
Hi,
Die Begründung heißt "collapsing Margins". Der top-margin der H1 wird mit dem top-margin des Eltern-DIVs zusammengefasst und dem DIV zugerechnet, deswegen erscheint er nur als Offset bei der Überschrift.
Hm, aber warum kommt dann überhaupt kein margin? Ich hatte bisher gedacht, dass "collapsing" bedeutet, dass der größere margin genutzt wird?!Collapsing Margins umfassen noch mehr als nur das:
"The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance."MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi,
Collapsing Margins umfassen noch mehr als nur das:
"The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance."Vielen Dank für diesen gezielten Hinweis! Das hat mir wirklich weitergeholfen!
Wie verhält sich denn aber mit meinem zweiten Beispiel. Wann ist ein Element ein "in-flow block-level"-Element? Habe ich das gezielten Einfluß per css? Wie könnte ich erreichen, dass auch hier der Margin vom <h1> dem Eltern-Element zugerechnet wird?
Viele Dank und viele Grüße
Daniel
-
-
-
-
Hallo,
irgendein - in meinem Beispiel entscheidendes - Detail ist mir vermutlich entgangen. In dem folgendem simplen Beispiel habe ich eine Überschrift in einem <div> eingefügt. Diese Überschrift hat einen margin-top (50px), der leider nicht erscheint.
wo nicht erscheint.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Problem mit einem margin-toptitle>
</head><body>
<div style="margin: 0; padding: 0; background-color: yellow;
width: 500px; height: 500px;"><h1 style="margin: 50px 0; background-color: lime;">Überschrift 1</h1>
<div style="background-color: lime;">und was darunter, ohne eigene
Abstände.</div></div>
</body>
</html>ergibt völlig erwartungsgemäß einen 50-Pixel breiten Bereich in hellblau (meiner Browserhintergrundfarbe), darunter die Überschrift in einem Grünton, darunter ist 50 Pixel breit Dein gelber div-Hintergrund zu sehen. Es folgt mit grünem Hintergrund der Text im inneren div-Element, danach der Rest Deiner 500 Pixel in Gelb und darunter hab' ich wieder mein nettes babyblau. Was erwartest Du? Siehst Du gar etwas anderes? Freundliche Grüße Vinzenz-
Hi,
Was erwartest Du? Siehst Du gar etwas anderes?
Ich hatte auch über der Überschrift einen 50px hohen gelben "Streifen" erwartet.
Viele Grüße
Daniel
-