Saventi: Zu großer margin-bottom! HILFE!

Aus irgendeinem Grund wird bei meinem Bild mit den Eigenschaften float: left; und margin-right: 10px; und margin-bottom: 10px; der margin-bottom zu groß angezeigt. Ich habe auch schon den Cache geleert und den Code überprüft, aber ich finde einfach den Fehler nicht.

CSS Code:

  
.left {  
float: left;  
margin-right: 10px;  
margin-bottom: 10px;  
}  

HTML Code:

  
<img src="../images/rss.PNG" width="48" height="48" class="left">  

  1. Hi,

    Aus irgendeinem Grund wird bei meinem Bild mit den Eigenschaften float: left; und margin-right: 10px; und margin-bottom: 10px; der margin-bottom zu groß angezeigt. Ich habe auch schon den Cache geleert und den Code überprüft, aber ich finde einfach den Fehler nicht.

    Ich auch nicht.
    Margin definiert den Aussenabstand, also idR. den zu anderen Elementen.
    Was glaubst du, wie viel ein Leser deiner Problembeschreibung sich jetzt darunter vorstellen kann, wenn du den Code fuer genau *ein* Element zeigst ...?

    Lies bitte die Tipps fuer Fragende - und dann beschreibe dein Problem noch mal verstaendlich und nachvollziehbar. AM liebsten mit einem validen, auf's wesentliche reduzierten Online-Beispiel.

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“
    1. Nun ich habe das Bild in einen Text eingefügt und dabei das Attribut margin benutzt. Aus irgendeinem mir nicht ersichtlichen Grund ist dabei der margin-botton zu groß.

      Am besten du schaust dir den Code auf folgender Seite an: http://www.pokecenter.de/home/rss.php

      Meine bisherigen Versuche:

      • Cache leeren
      • algin: left und hspace bzw. vspace verwenden
      • margin-bottom reduzieren

      PS: Es tut mir leid, wenn ich mein Problem unverständlich formuliert habe. ;(

      1. Hi,

        Nun ich habe das Bild in einen Text eingefügt und dabei das Attribut margin benutzt. Aus irgendeinem mir nicht ersichtlichen Grund ist dabei der margin-botton zu groß.

        Nein, ist er nicht.
        Aber die Hoehe, die unter dem Bild und seinem margin-bottom uebrig bleibt reicht nun mal nicht, um auf dieser Zeile noch Text darzustellen. Also umfliesst der Text in dieser Zeile das Bild ebenfalls noch, so wie auf den vorherigen - und erst in der naechsten wird er dann wieder vom linken Rand an dargestellt.

        Wenn du sowas verhindern willst, dann muesstest du dein Bild, seine Abstaende, und die Zeilenhoehe des Fliesstextes besser in Einklang bringen. Das ist aber natuerlich schwierig, da du die letztendliche effektive Zeilenhoehe in Pixeln auf dem Client gar nicht kennst.
        Die Masze und den margin des Bildes in der relativen Maszeinheit em anzugeben, koennte diesem Problem zwar bei geschickter Anwendung abhelfen - schafft dann aber, da der Browser das Bild resizen muss, ggf. ein neues.

        MfG ChrisB

        --
        „This is the author's opinion, not necessarily that of Starbucks.“
        1. Die Masze und den margin des Bildes in der relativen Maszeinheit em anzugeben, koennte diesem Problem zwar bei geschickter Anwendung abhelfen - schafft dann aber, da der Browser das Bild resizen muss, ggf. ein neues.

          Erstmal danke für deine schnelle Antwort, nun würde mich aber genauer diese Maßeinheit interessieren. Ich habe diese zwar schon oft gesehen, aber in meinen CSS-Dateien immer nur px, pt oder % verwendet. Nun würde mich interessieren wie viel 1em zum Beispiel in px ist, um alles besser abschätzen zu können. Allerdings ist das wohl langfristig gesehen ebenfalls keine Lösung, da die Bilder immer unterschiedlich groß sind. Mein Problem ist nun, dass ich nicht weiß, wie viel margin-right ich angeben soll damit es beide Abstände gleich aussehen - bei jeder Auflösung.

          Gruß, Saventi!

          1. Hi,

            Nun würde mich interessieren wie viel 1em zum Beispiel in px ist, um alles besser abschätzen zu können.

            Der Witz an der Sache ist der, dass dich das gar nicht zu interessieren hat - weil es von der Schriftgroesse, die der Nutzer in seinem Browser als Default eingestellt hat, abhaengt.

            Allerdings ist das wohl langfristig gesehen ebenfalls keine Lösung, da die Bilder immer unterschiedlich groß sind. Mein Problem ist nun, dass ich nicht weiß, wie viel margin-right ich angeben soll damit es beide Abstände gleich aussehen - bei jeder Auflösung.

            Eine flexible, praktikable Loesung dafuer gibt es m.E. nicht.

            Du koenntest natuerlich die Zeilenhoehe ebenfalls in Pixeln vorgeben, wenn du fuer die Schriftgroesse ebenfalls Pixel verwendest - und dann die noetigen Abstaende in Pixel unter Einbeziehung der Bildgroesse jeweils berechnen.
            Aber wenn der Nutzer dann die Schriftgroesse aendert, was aktuelle Browser auf bei Angabe dieser in Pixeln erlauben, wird das wohl auch wieder auseinanderfallen.

            MfG ChrisB

            --
            „This is the author's opinion, not necessarily that of Starbucks.“
            1. Hallo,

              Aber wenn der Nutzer dann die Schriftgroesse aendert, was aktuelle Browser auf bei Angabe dieser in Pixeln erlauben, wird das wohl auch wieder auseinanderfallen.

              Außer IE bis einschließlich Version 7 (IE8 weiß ich jetzt nicht aus dem Kopf). Der vergrößert die Schrift nciht, wenn px angegeben sind. Was icvh einerseits gut finde - wenn jemand schon die Schriftgröße Pixelgenau angibt, sollte die Schrift sich nciht verändern. Für mich als Entwickler kommen aber Pixel nciht in Frage, weil ich dem Nutzer die Möglichkeit geben möchte, die Texte so zu vergrößern oder zu verkleinern, dass er sie gut lesen kann.

              Die Zoom-Funktion des IE wiederum vergrößert in Höhe und Breite gleich, d. h. der gewünschte Effekt (Breite und Höhe sollen gleich aussehen) bliebe erhalten.

              Viele Grüße,
              Marc.

              --
              Und immer schön
              validieren (http://validator.w3.org/)