Ich erstelle gerade für eine Freundin eine neue Website (Wordpress).
Auf einer Seite ist mir zuviel Weißer Space, also wollte ich mit einem DIV 3 Bilder einsetzten (Über Slider u.ä. gefällt mir die Lösung nicht).
Das hat auch ganz gut geklappt, aber um das einfach anschaulicher zu gestallten, soll zwischen den Bildern ein kleiner Abstand um den Hintergrund zu sehen...
Da sich meine html und CSS Kenntnisse in Grenzen halten, schaffe ich es einfach nicht dieses siplme Vorhaben um zu setzten.
Verschiedene Padding, float, magin befehlte habe ich schon ohne Erfolg probiert umzusetzten (evtl sogar einfach falsch umgesetzt.
Die Website mit den Bildern befindet sich hier: <a href="http://www.schönheitsreich.de/schminkkurs">Schönheitsreich</a>
Dort kann man sich die Bilderanordnung anschauen, den Code füge ich bei.
Evtl kann mir jemand einen Tipp geben wie ich das richtig umsetzten kann.
Bitte entschuldigt, falls der Code völlig falsch aufgebaut ist, freue mich jedoch über Verbesserungen
Code
<style>
#div1{
background-image:url(/image/Schminkkurs-in-Mainz-Moll-1.jpg);
background-size:100% 100%;
height:200px;
width:400px;
transition:.3s;
}
#div1:hover{
background-image:url(/image/unnamed.webp);
background-size:100% 100%;
height:200px;
width:400px;
transition:.3s;
}
</style>
<div id="div1" style="background-color:red;padding:3px;border:solid 7px;"> </div>