Bilder untereinander ohne Abstand trotz Anweisung

[Henry]

Hallo,

endlich mal was, was ich auch online zeigen kann 😉 http://dabblet.com/gist/d18b8aa8d6422f30e0736c9aceaea5d5

Es geht um den, nicht gewollten, Abstand zwischen den Bildern. Im Netz und auch hier taucht diese Frage des Öfteren auf und sollte eigentlich(mehrheitlicher Lösungsvorschlag) durch die CSS-Anweisung *{margin:0;padding:0;} zu beseitigen sein.

Ist aber nicht so, warum?

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

* { margin: 0; padding: 0; }

ist keine gute Idee.

Die Bilder sind inline-Elemente, das heißt sie stehen mit dem Text in einer Zeile. Sie sind deshalb an der Grundlinie des Textes ausgerichtet. Der Platz, den du siehst, ist für Unterlängen reseviert.

Abhilfe schafft zum Beispiel display: block oder vertical-align: bottom für die Bilder.

Bis demnächst
Matthias

[Henry]

Hallo,

*Kleiner Bug?

wollte gerade antworten und dabei Matthias Antwort im Zitat umstrukturieren. Genauer: Einen kleinen Abschnitt daraus markieren und an anderer Position ziehen. Dann schaltet aber das Feld hier direkt auf Bildupload um, aus dem ich auch nicht wieder rauskomme. Dachte zuerst zufälliger Effekt, leider aber reproduzierbar.

Ups... jetzt wird's noch kurioser.. Klicke gerade auf Bildsymbol um davon einen Screenshot einzufügen und war mir eigentlich sicher hier Bilder hochladen zu können, kommt aber nur URLeingabe.. hmmm... Och nö... das Bildsymbol ist wohl nur für URL, unten steht ja Bilder hochladen, etwas verwirrend... lasse jetzt aber trotzdem meinen Gedankengang stehen für andere, die ähnlich verwirrt sein könnten 😉

Ändert aber nichts an dem eventuellen "BUG".

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

danke für den Hinweis, das muss sich @Christian Kruse anschauen.

Bis demnächst
Matthias

[Christian Kruse]

Hallo Henry,

wollte gerade antworten und dabei Matthias Antwort im Zitat umstrukturieren. Genauer: Einen kleinen Abschnitt daraus markieren und an anderer Position ziehen.

Da ich nie Text dragge, habe ich einfach nicht daran gedacht, dass es diese Möglichkeit gibt 😉

Dann schaltet aber das Feld hier direkt auf Bildupload um, aus dem ich auch nicht wieder rauskomme. Dachte zuerst zufälliger Effekt, leider aber reproduzierbar.

Fixed.

LG,
CK

[Henry]

Hallo Matthias,

* { margin: 0; padding: 0; }

ist keine gute Idee.

darüber sind sich die Gelehrten anscheinend noch nicht richtig einig, wenn ich da so manches zu lese. In diesem Fall ist aber hilfreich das so zu gebrauchen, wenn ich deinen Vorschlag mit vertical-align nutze. Ansonsten müsste ich auch noch dem img umschließenden p explizit die Abstände nehmen, damit vertical-align funktioniert.

....Der Platz, den du siehst, ist für Unterlängen reseviert.

Das habe ich so noch nirgendwo gelesen, danke für den Hinweis und Link.

Abhilfe schafft zum Beispiel display: block oder vertical-align: bottom für die Bilder.

Wer die Wahl hat ;-) .... entscheide mich für Tor2. also vertical-align, danke.

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

* { margin: 0; padding: 0; }

ist keine gute Idee.

darüber sind sich die Gelehrten anscheinend noch nicht richtig einig, wenn ich da so manches zu lese. In diesem Fall ist aber hilfreich das so zu gebrauchen, wenn ich deinen Vorschlag mit vertical-align nutze. Ansonsten müsste ich auch noch dem img umschließenden p explizit die Abstände nehmen, damit vertical-align funktioniert.

In deinem Beispiel sind die Bilder die einzigen Elemente in ihrem Absatz. Also brauchst du die Absätze gar nicht.

Dennoch solltest du nicht für alle Elemente alle Abstände auf Null setzen, nur um sie für einige Elemente hinterher wieder neu festzulegen. Ändere nur das, was du wirklich brauchst.

Reset-Stylesheets sind geeignet, wenn du ein komplettes Template entwickelst, aber auch dann besteht keine Notwendigkeit.

Bis demnächst
Matthias

[MrMurphy1]

Hallo

darüber sind sich die Gelehrten anscheinend noch nicht richtig einig

Doch. Das ist ein unsinniges "Wundermittel" mit unerwünschten Nebenwirkungen. Das war auch nie sinnvoll.

entscheide mich für Tor2. also vertical-align

Auch das ist nur die zweitbeste Lösung.

Bilder haben als Inline-Block-Elemente aus ihrem inline einen Zwangsabstand nach unten und nach rechts. Mit vertical-align wird nur der untere Abstand gelöscht. Wenn du später mal Bilder ohne Abstand nebeneinander stellen willst fängst du wieder von vorne an und kannst auf vertical-align wieder verzichten.

In der Vergangenheit bewährt hat sich deshalb die Bilder als Block-Elemente auszuzeichnen. Falls die nebeneinander stehen sollen müssen die dann noch gefloatet werden, was wiederum zu Nebenwirkungen führt, die berücksichtigt werden müssen.

Aktuell und in die Zukunft betrachtet hat sich für solche Probleme Flexbox bewährt.

Ich habe mal eine Beispielseite mit den verschiedenen Möglichkeiten zum direkten Ausprobieren erstellt:

Beispielseite

Für das letzte, absichtlich fehlerhafte, Beispiel am Besten mal mit der Fensterbreite und / oder dem Zoomfaktor spielen.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Bilder haben als Inline-Block-Elemente aus ihrem inline einen Zwangsabstand nach unten …

Ja.

… und nach rechts.

Nein. <img src="…" alt="…"/><img src="…" alt="…"/> – nix mit Abstand rechts.

Aktuell und in die Zukunft betrachtet hat sich für solche Probleme Flexbox bewährt.

Es sei denn, man möchte ein Grid.

LLAP 🖖

[MrMurphy1]

Hallo

nix mit Abstand rechts

Dann solltest du aber auch gleich dazu schreiben, dass es an deinem Quelltext ohne Abstände und Absätze zwischen den img-Elementen liegt. Außer dir wird aber kaum jemand solchen Endlos-HTML-Quelltext verwenden.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

nix mit Abstand rechts

Dann solltest du aber auch gleich dazu schreiben, dass es an deinem Quelltext ohne Abstände und Absätze zwischen den img-Elementen liegt. Außer dir wird aber kaum jemand solchen Endlos-HTML-Quelltext verwenden.

Das nicht. Und ich auch nicht.

Ich wollte darauf hinaus, dass es kein „Zwangsabstand“ ist, wie du sagtest, sondern der im Code vorhandene Whitespace als Leerzeichen dargestellt wird.

LLAP 🖖

[MrMurphy1]

Hallo

Bleibt die Frage warum du das nicht direkt schreibst?

Ich versuche aber mal meine Beispielseite um ein CSS-Grid-Beispiel zu erweitern. Das hatte ich noch nicht auf meinem Radar.

Gruss

MrMurphy

[Matthias Apsel]

Hallo MrMurphy1,

Bleibt die Frage warum du das nicht direkt schreibst?

Weil der "Zwangsabstand nach rechts" eben nichts mit dem Bild zu tun hat.

Bis demnächst
Matthias