Bilder untereinander ohne Abstand trotz Anweisung
Henry
- css
- grafik
- html
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
Hallo Henry,
* { margin: 0; padding: 0; }
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
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
Hallo Henry,
danke für den Hinweis, das muss sich @Christian Kruse anschauen.
Bis demnächst
Matthias
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.
LG,
CK
Hallo Matthias,
* { margin: 0; padding: 0; }
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
odervertical-align: bottom
für die Bilder.
Wer die Wahl hat ;-) .... entscheide mich für Tor2. also vertical-align, danke.
Gruss
Henry
Hallo Henry,
* { margin: 0; padding: 0; }
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
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:
Für das letzte, absichtlich fehlerhafte, Beispiel am Besten mal mit der Fensterbreite und / oder dem Zoomfaktor spielen.
Gruss
MrMurphy
@@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 🖖
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
@@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 🖖
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
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