nicht angemeldet
Hallo Tlyman
Eigentlich habe ich erwartet, dass der Link direkt am oberen Rand liegt und nicht noch hochrutscht, aber OK, man lernt ja immer dazu.
Wie bereits geschrieben ist der Link ein Inlineelement. Es hat nur die Zeilenhöhe, es nimmt sich keinen zusätzlichen Platz. Wenn jetzt die Zeile oben direkt an den Rand des Browserfensters stößt, dann ist dort kein Platz mehr für den Border.
Genau, und was hat <h1> in den Browsern üblicherweise?
(vielleicht einen oberen und unteren Rand?)Das verstehe ich noch nicht ganz. Der obere Rand von H1 soll ja bleiben wie er ist und der untere dürfte doch keinen Einfluss auf den unteren Rand des body haben,
Natürlich hat der untere Rand keinen Einfluss. Der obere Rand von H1 fällt aber mit dem Rand (auch wenn dieser 0 ist) zusammen. Das führt dazu, dass dann praktisch Body diesen Rand hat und Body damit um diesen Rand höher als 100% wird.
Hmm, mit border-top rutscht die Zeile auf die richtige Höhe (wie mit border), ...
Damit erkennst du, dass der Body durch oben zusammenfallende Ränder zu hoch wird.
hat aber noch einen Abstand zum unteren Rand (sprich man kann noch ein Stückchen runterscrollen).
Wohl um die Breite des Borders.
Mit border-bottom ist sie wieder nach unten gerutscht (so wie ohne border), liegt dafür aber am unteren Rand an.
Bei border-bottom (ohne border-top) ist das Verhalten wie ganz ohne border, womit du siehst, dass dein Problem oben und nicht unten entsteht.
Ich habe gedacht, dann müsste sich die Position von H1 bzw. dessen Abstand zum oberen Fensterrand ändern.
Mit border-top hat Body oben keinen Rand und H1 hat einen oberen Rand Und ohne border-top fällt der obere Rand von H1 mit dem Rand von body zusammen, das führt dazu, dass Body den breiteren der Ränder übernimmt. Der Abstand den H1 zum oberen Fensterrand hat bleibt dabei gleich, denn dafür ist es unerheblich, ob der selbe Rand Body oder H1 gehört.
Aber stattdessen ändert sich ja nur die Höhe von body.
Ja, denn wenn Body den Rand übernimmt ist es dadurch insgesamt 100% + Randbreite hoch.
Wenn ich jetzt einfach hinnehme, dass da jetzt Ränder zusammenfallen, wüsste ich trotzdem nicht, was ich dagegen tun soll... einen Rahmen mit transparenter Farbe? Oder kann man das irgendwie "normal" beheben?
Muss H1 denn unbedingt ein margin-top haben? (_du_ hast es zwar nicht definiert, aber das Browser-CSS)
Könntest du margin-top nicht einfach auf 0 setzen und dafür ein passendes padding-top setzen?
Auf Wiederlesen
Detlef
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!