offsetLeft, offsetTop eines fließenden Textabsatzes

[Gunnar Bittersmann]

@@Der Martin

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.

---

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.

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

Zwischen dem div und dem p ist der Abstand p { margin-block: 1em } (Browser-Default). Wenn man den nullt, ist spanElement.offsetTop um 16 geringer.

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.

🖖 Живіть довго і процвітайте