Canvas mit offsetTop obwohl margin/padding=0px

  • Hallo allerseits,


    Ich stehe gerade vor einem Rätsel, was die Darstellung von Framework-generiertem HTML angeht.


    Einer div-Box, die absolut positioniert ist (das Framework berechnet das Layout server-seitig), wird als einziges Kind-Element ein Canvas hinzugefügt - in den Entwicklertools sieht das wie folgt aus:

    Code
    <div tabindex="8" style="position: absolute; opacity: 1; overflow: hidden; outline: none; z-index: 2; border-width: 0px; border-style: none; width: 109px; height: 8px; left: 15px; top: 29px;">
    <canvas width="109" height="8" style="width: 109px; height: 8px;"></canvas>
    </div>


    Was mich nun verwirrt, ist, dass in der "richtigen" Anwendung das Canvas mit einem offset zur Oberkante des divs ge-layouted wird (im Beispiel oben hat das Canvas z.B. offsetTop = 6).

    In der Anwendung kommen mehrere solche Div/Canvas-Verschachtelungen vor, dieser Offset scheint umso ausgeprägter zu sein, je kleiner die Elemente sind.

    Ändere ich das Canvas von display=inline auf display=block verschwindet dieser Offset.
    Kopiere ich nur diese beiden Elemente in ein leeres HTML-File, gibt es keinen Abstand - egal ob display=inline oder block.


    Betrachtet mit den Entwicklertools sind selbst in der richtigen Anwendung padding/margins/border der beiden Elemente konsistent 0px:

    Canvas:

    html-seminar.de/woltlab/attachment/3146/


    Div:


    html-seminar.de/woltlab/attachment/3147/:


    Habt ihr eine Idee, woher diese 6px offset stammen könnten / wer/was diese verursacht?

    Tritt sowohl mit Chome als auch Firefox auf.

    Danke & lg, Clemens

  • Häufiges Problem und man kann gut rätseln, wie das zu Stande kommt. Die Erklärung ist, dass per Default die vertikale Ausrichtung von Elementen baseline ist. Das wird hier erklärt:

    https://wiki.selfhtml.org/wiki…richtung#Unterl.C3.A4ngen

    mit dem deutschen Begriff "Grundlinie" für Baseline.

    Für Text so weit plausibel aber dass das auch auf Bilder einschl. Canvas angewendet wird - na ja.

    Macht man die Elemente farbig und fügt einige Buchstaben hinzu, erkennt man, dass auch das Canvas unten an der Grundlinie ausgerichtet ist:

    html-seminar.de/woltlab/attachment/3148/


    Beheben kannst Du es leicht, indem Du für das Canvas vertical-align: top; setzt. Eine Alternative ist display: flex; für das div weil dann die vertikale Ausrichtung durch align-items bestimmt wird.

  • Einer div-Box, die absolut positioniert ist (das Framework berechnet das Layout server-seitig),

    … und hat sich damit selbst disqualifiziert. Ein Layout kann nicht serverseitig berechnet werden und postion als Layoutmittel ist auch nur sehr mäßig sinnvoll - verwende grid bzw. flex und lass den Browser das Rechnen machen.

  • Die Erklärung ist, dass per Default die vertikale Ausrichtung von Elementen baseline ist. Das wird hier erklärt:
    ......

    Beheben kannst Du es leicht, indem Du für das Canvas vertical-align: top; setzt. Eine Alternative ist display: flex; für das div weil dann die vertikale Ausrichtung durch align-items bestimmt wird.


    Vielen vielen Dank für deine Analyse und den Lösungsvorschlag! Darauf wäre ich wohl im Leben nicht gekommen!
    Ich hoffe bald dazu zu kommen einen Patch einzureichen, werde dich dankend erwähnen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!