[HTML/CSS] unerklärlicher Abstand unterhalb von Bildern

Dieses Thema im Forum "Webmaster Hilfe / Programmierer Forum" wurde erstellt von Psycot-X, 27.04.2012.

  1. #1 Psycot-X, 27.04.2012
    Zuletzt bearbeitet: 28.04.2012
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Hallo liebe MBler,

    Ich habe ein kleines tumblog, um ein bisschen mit HTML/CSS zu experimentieren. Ich habe für den "blog" also mein eigenes Theme erstellt und verwende dieses.

    Allerdings werden unter allen Bildern 4px zu viel Abstand berechnet. (Durch margin-bottom:-4px; auf Bildern kann ich das wegnehmen)
    Ich kann aber einfach nicht den Fehler finden, wieso das der Fall ist. Ich habe alles versucht, dass ganze Teil mit Firebug und Tilt auseinander genommen. Entsprechende Elemente und Vorfahren hab ich testweise mit margin:0; und padding:0; versehen. Ich finde einfach nicht den Punkt, an dem mir dort die 4px untergeschoben werden. Auch deutet keine Definition in irgendeinem Vorfahrenelement darauf hin (mit Firebug untersucht).

    Hier ist zunächst der tumblog: infinite amplitudes
    Weiterhin hier mal das Theme auf pastebin: http://pastebin.com/1wKAqf1N
    Hier ein Screenshot vom Geschehen mit einer schematischen Darstellung:
    [​IMG]

    Kann mir irgendjemand erklären, woher diese 4px kommen?
    Ich vermute irgendetwas Richtung line-height oder einer vermurxten Vererbung. Aber weiter weiß ich nicht.

    Danke schon mal. Ciao und einen schönen Tag noch.

    PS: Hat das Bild einen Link (mit a-tags umschlossen), so gehört der Extrabereich mit den 4 Pixeln zu dem Link, aber das Bild hört eben schon eher auf. wenn ich das a-Element mit Firebug untersuche umfasst es nur so viel, als stände dort eine Zeile Text. Das a-Element umfasst also die 4 Extrapixel und ein Teil vom Bild. Praktisch wirkt sich der Link aber auf das komplette Bild aus.

    PS2: Wenn ich in Firebug für das p-Element eines Artikels (Bilder werden immer von einem p-Tag umschlossen) line-height:0; festlege, ist der zusätzlich Abstand weg. Aber das ist immer noch nicht die korrekte Lösung scheint mir.
     
  2. AdMan

    schau mal hier: Windows-Wartungs-Tool. Viele Probleme lassen sich damit einfach beheben. Oftmals ist der PC dann auch schneller!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  3. #2 Psycot-X, 28.04.2012
    Zuletzt bearbeitet: 29.04.2012
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Lösung: DOCTYPE-Switch: Unerklärliche Lücken zwischen Elementen

    Bilder werden nicht auf dem "Boden" einer Zeile, sondern auf der sogenannten Baseline angeordnet.
    Auf der Baseline werden auch alle normalen Buchstaben angeordnet außer solche wie g, q, p und j. Diese Buchstaben benötigen in meinem Fall diese 4 Pixel mehr Platz.
     
Thema: [HTML/CSS] unerklärlicher Abstand unterhalb von Bildern
Besucher kamen mit folgenden Suchen
  1. unerklärliche abstände zwischen den elementen

    ,
  2. css abstand unerklärlich

    ,
  3. unerklärlicher abstand nach img html

    ,
  4. abstand unterhalb bild link,
  5. css unerklärlich,
  6. dell xps oberer rand,
  7. css kein abstand unter bild,
  8. p tag zu viel abstand unten,
  9. html lücke <p> abstand,
  10. dell laptop oberer bildrand lücke,
  11. html css unerklärliche lücke,
  12. css abstand vor abstand weg,
  13. css abstand unter bild,
  14. css unerklärlicher abstand,
  15. dell xps 15z darstellungsfehler bei vollbild,
  16. css alles unterhalb von,
  17. css zwischenräume bei a:,
  18. unerklärlicher abstand unter bild,
  19. html css default abstände p,
  20. css abstand zusätzlich
Die Seite wird geladen...

[HTML/CSS] unerklärlicher Abstand unterhalb von Bildern - Ähnliche Themen

  1. Bild vom PC mit DVD-Recorder aufnehmen

    Bild vom PC mit DVD-Recorder aufnehmen: Hallo. Ich such nen Weg, evtl. Games und vor allem Videos vom PC auf nen DVD-Recorder zu übertragen und dort auf zu nehmen. Am besten wär wohl...
  2. Verzogenes Bild

    Verzogenes Bild: Hallo zusammen, ich habe zwei Bildschirme (beide funktionieren auch einwandfrei). Der Pc startet auch so wie immer, nur dass das Bild deutlich...
  3. Facebook Bilder hochladen

    Facebook Bilder hochladen: Hall allerseits, ich weiß jetzt nicht, ob die Rubrik passt, deswegen stell ich mein Problem mal hier ein. Seit ein paar Wochen kann ich keine...
  4. PC startet, jedoch kein Bild - Error Code 15

    PC startet, jedoch kein Bild - Error Code 15: Guten Abend, Ich habe ein mühsames Problem: Seit einiger Zeit hat mein PC die Make, dass er 2-3 anläufe braucht bis er anspringt (Wie ein...
  5. MS Word: Abstand Abbildung zur Formkontur

    MS Word: Abstand Abbildung zur Formkontur: Hallo zusammen, mein Problem ist auf den beiden angehängten Bildern zu sehen Die Abbildung habe ich mit SmartArt erstellt und ich benötige jetzt...