Leerzeichen zwischen Bilder

Question

Hallo zusammen,

ich möchte unter meiner Frage Bilder einfügen. Dafür verwende ich diesen Code:

<div style="display: flex; flex-wrap: wrap">
  <img src="trans1.jpg" style="flex: 1 1 auto; min-width: 300px; max-width: 560px;"> 
  <img src="trans2.jpg" style="flex: 1 1 auto; min-width: 300px; max-width: 560px;">
</div>

Ich möchte, dass es zwischen den Bildern ein Leerzeichen gibt und sie nicht direkt aneinanderkleben. Wie bekomme ich das hin?

Mit lieben Grüßen

Answer 1

Ein Leerzeichen wäre eine denkbar schlechte Idee - so ähnlich, als würde man in Word Abstände dadurch erzeugen, dass man mehrfach die Eingabetaste drückt ;)

Die saubere Lösung bei einer CSS Flexbox ist das gap Attribut.

<div style="display: flex; flex-wrap: wrap; gap: 2em;">
  <img src="trans1.jpg" style="flex: 1 1 auto; min-width: 300px; max-width: 560px;"> 
  <img src="trans2.jpg" style="flex: 1 1 auto; min-width: 300px; max-width: 560px;">
</div>

2em wäre hier Abstand in der Größe von zwei "m", aber SIe können auch Pixel angeben, z.B. 20px.

Comments

Das gap-Attribut tragen Sie direkt im HTML-Code ein, vgl. mein Beispiel oben.