@@Der Martin > > Den Code von Linuchs so mit unlesbaren Stringkonkatenationen (wir sprachen drüber) und `document.write()`{:.language-js.bad} – sorry, den will ich mir nicht ansehen. > > Ich sehe weder das eine noch das andere. [Ich sehe beides.](https://forum.selfhtml.org/self/2022/jun/19/offsetleft-offsettop-eines-fliessenden-textabsatzes/1799911#m1799911) --- > Konkret: Warum ist bei einer Struktur > > ~~~ html > <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`{:.good}, nicht `border`{:.bad}, um nichts zu verfälschen). [Ich sehe alles.](https://codepen.io/gunnarbittersmann/pen/BaYEbZq?editors=1111) Durch das `p { float: left }`{:.language-css} 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 }`{:.language-css} (Browser-Default). Wenn man den nullt, ist `spanElement.offsetTop`{:.language-js} 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. 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix

@@Der Martin > > Den Code von Linuchs so mit unlesbaren Stringkonkatenationen (wir sprachen drüber) und `document.write()`{:.language-js.bad} – sorry, den will ich mir nicht ansehen. > > Ich sehe weder das eine noch das andere. [Ich sehe beides.](https://forum.selfhtml.org/self/2022/jun/19/offsetleft-offsettop-eines-fliessenden-textabsatzes/1799911#m1799911) --- > Konkret: Warum ist bei einer Struktur > > ~~~ html > <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`{:.good}, nicht `border`{:.bad}, um nichts zu verfälschen). [Ich sehe alles.](https://codepen.io/gunnarbittersmann/pen/BaYEbZq?editors=1111) Durch das `p { float: left }`{:.language-css} 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 }`{:.language-css} (Browser-Default). Wenn man den nullt, ist `spanElement.offsetTop`{:.language-js} 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: 0`, sind auch die weg. 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix

@@Der Martin > > Den Code von Linuchs so mit unlesbaren Stringkonkatenationen (wir sprachen drüber) und `document.write()`{:.language-js.bad} – sorry, den will ich mir nicht ansehen. > > Ich sehe weder das eine noch das andere. [Ich sehe beides.](https://forum.selfhtml.org/self/2022/jun/19/offsetleft-offsettop-eines-fliessenden-textabsatzes/1799911#m1799911) --- > Konkret: Warum ist bei einer Struktur > > ~~~ html > <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`{:.good}, nicht `border`{:.bad}, um nichts zu verfälschen). [Ich sehe alles.](https://codepen.io/gunnarbittersmann/pen/BaYEbZq) Durch das `p { float: left }`{:.language-css} 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 }`{:.language-css} (Browser-Default). Wenn man den nullt, ist `spanElement.offsetTop`{:.language-js} 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: 0`, sind auch die weg. 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix