offsetLeft, offsetTop eines fließenden Textabsatzes

[Der Martin]

Moin,

Den Code von Linuchs so mit unlesbaren Stringkonkatenationen (wir sprachen drüber) und document.write() – sorry, den will ich mir nicht ansehen.

Ich sehe weder das eine noch das andere.

Ich sehe beides.

okay, hast recht. So weit runter hatte ich das Script nicht mehr gelesen, sondern mich stattdessen nur noch auf die Offset-Geschichten und mögliche CSS-Stolpersteine konzentriert.

Konkret: Warum ist bei einer Struktur

<div style="position:relative">
 <p style="float:left"><span>Text</span></p>
</div>

die offsetTop-Eigenschaft des span-Elements nicht 0, wie man erwarten würde, sondern hat einen Wert ungleich 0, dessen Herkunft für mich nicht nachvollziehbar ist?

Um das nachvollziehbar zu machen, hab ich mal die Boxen der Elemente sichtbar gemacht (outline, nicht border, um nichts zu verfälschen).

Ich sehe alles.

Ich sehe nichts. Cloudflare (was codepen.io wohl als Proxy vorgeschaltet hat) lässt mich direkt nacheinander drei Captchas lösen ("I am human") und will mich dann irgendwohin weiterleiten ("Redirecting"). Nach etwa 5min Warten habe ich aufgegeben.

Durch das p { float: left } hat das div keinen Inhalt, der eine Höhe aufspannen würde.

Ja, klar.

Zwischen dem div und dem p ist der Abstand p { margin-block: 1em } (Browser-Default).

margin-block?? Du meinst margin-top?

Wenn man den nullt, ist spanElement.offsetTop um 16 geringer.

Verstehe.

Die restlichen 2 kommen daher, dass die Zeilenboxen des span (Höhe der Schrift) mittig innerhalb der Höhe des Zeilenabstands sitzen (per Browser-Default größer als die Schriftgröße). Setzt man line-height: 1, sind auch die weg.

Aber Linuchs hatte eine "Missweisung" von 80, nicht 16 oder 20.

Einen schönen Tag noch
 Martin