CSS-Problem

[Friedel]

Ich habe die margins und paddings entfernt, um die Ursache für das komische Verhalten zu finden. So kann ich viele Ursachen für das Verhalten ausschließen. Wenn ich die Ursache gefunden habe, entferne ich die Zeile natürlich wieder. Auch die Hintergrundfarben habe ich nur eingefügt, damit ich die Elemente sehen kann. So weiß ich sicher, dass das h1-Element so hoch und so breit ist, wie es sein soll. Natürlich entferne ich auch das, wenn ich den Fehler gefunden habe wieder.

Du gibst html und body eine feste Höhe. Ohne Grund.

Wie kommst du darauf? Das mache ich natürlich nicht ohne Grund. Außerdem ist das keine feste Höhe.

Aber diese Behauptung hat mich auf eine Idee gebracht. Ich habe probehalber mal eine feste Höhe vergeben.

Ich habe jetzt also

*               {padding:0; margin:0;}
html, body      {height:1000px;}
body            {color: #100; background-color: #ffe;
                font-family: Arial, Helvetica, Sans-Serif;
                }
h1              {text-align:center; background-color: #ffc; margin-top:800px;}

Ohne margin-top:800px ist der Body 100px hoch, mit margin-top:800px ist er fast doppelt so hoch. Der gelbe Streifen der Überschrift ist 34px hoch. Wenn darüber 800px margin sind, müssten darunter also noch 166px frei sein.