Lücken zwischen Bilder setzen, die einen Rahmen haben
Hallo liebe User! :)
Ich versuche seit Stunden etwas zu basteln, bekomme es aber leider nicht hin. Ich habe mich schon dumm und dämlich gegoogelt aber immer wieder verschiedene Sachen gefunden mit Margin und Padding, mal in einem CSS Style und mal mit Style im HTML Image Tag....aber ich bekomme es einfach nicht hin.
Vorweg: Ich habe leider nicht wirklich viel Schimmer von dem HTML Zeug. :( Die letzten 15 Jahre hatte ich eine extrem einfach strukturierte kleine Homepage mit drei Frames, wo ich halt nur ein paar Bilder, ein paar Texte, Überschriften, Absätze und Linien "programmieren" musste. Das habe ich alles mit dem Phase5 HTML Editor erledigt. CSS und PHP waren für mich böhmische Dörfer.
Nun habe ich aber erstmals eine neue Variante des Designs probiert und mir ein Template geladen, das ich nun fülle.
Ich habe noch ein paar Codes für kleinere Bilddarstellungen gefunden, die ich genutzt habe, weil ich gerne meine Thumbnails mit diesen Rahmen versehen wollte.
Bei einer Übersichtsseite, bei der ich immer die gleiche Anzahl an Bildern pro Reihe habe, funktioniert das auch mit diesem CSS Code und Prozentangabe.
Jetzt habe ich aber noch eine andere Seite, bei der ich je Reihe mal mehr und mal weniger Bilder habe. Dementsprechend würde mir die Prozentualanagbe immer unterschiedliche Lücken schmeißen.
Daher habe ich jetzt "float" auf "Left" gesetzt. Allerdings bekomme ich es nicht hin, eine feste "px" Lücke zwischen die Bilder zu bekommen. Die Bilder liegen also nun etwas ineinander, bedingt durch den Rahmen.
Kann mir jemand sagen, wo ich welche Einstellung vornehmen muss um eine feste Lücke zwischen den Bildern zu definieren?
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
figure{
margin:0;
padding:0;
}
figure.bilder img {
width:160px;
border: 5px solid #eee;
box-shadow: 1px 1px 5px 2px #777;
}
.bild3 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.bild4 {
width:calc(0% + 5*160px + 10 * 10px);
display: flex;
flex-direction: row;
justify-content: space-between;
}
</style>
<div class="bild3">
<figure class="bilder">
<a href="" title=""><a href="/image/11.png" rel="lightbox">
<img src="/image/11.png">
</a>
</figure>
<figure class="bilder">
<a href="" title=""><a href="/image/11.png" rel="lightbox">
<img src="/image/11.png">
</a>
</figure>
<figure class="bilder">
<a href="" title=""><a href="/image/11.png" rel="lightbox">
<img src="/image/11.png">
</a>
</figure>
<figure class="bilder">
<a href="" title=""><a href="/image/11.png" rel="lightbox">
<img src="/image/11.png">
</a>
</figure>
<figure class="bilder">
<a href="" title=""><a href="/image/11.png" rel="lightbox">
<img src="/image/11.png">
</a>
</figure>
</div>
<div class="bild4">
<figure class="bilder">
<a href="" title=""><a href="/image/11.png" rel="lightbox">
<img src="/image/11.png">
</a>
</figure>
<figure class="bilder">
<a href="" title=""><a href="/image/11.png" rel="lightbox">
<img src="/image/11.png">
</a>
</figure>
<figure class="bilder">
<a href="" title=""><a href="/image/11.png" rel="lightbox">
<img src="/image/11.png">
</a>
</figure>
<figure class="bilder">
<a href="" title=""><a href="/image/11.png" rel="lightbox">
<img src="/image/11.png">
</a>
</figure>
<figure class="bilder">
<a href="" title=""><a href="/image/11.png" rel="lightbox">
<img src="/image/11.png">
</a>
</figure>
</div>