Odstęp między zdjęciami zawartych w divach

Question

Witam, mam problem z tworzeniem się odstępów między zdjęciami. Próbowałem margin:0, ale to nic nie daje. 

KOD HTML:

<div class="produktywlinii">
     <div class="produkt">
         <img src="nowosci/biankakanapanowosc.jpg" width="20%" height="200px">
	  </div>
	  <div class="produkt">
  <img src="nowosci/krzeslokrzyznowosc.jpg" width="20%" height="200px">
  </div><div class="produkt">
  <img src="nowosci/narozniktokyonowosc.jpg" width="20%" height="200px">
  </div><div class="produkt">
  <img src="nowosci/nowoscdarek6.jpg" width="20%" height="200px">
  </div><div class="produkt">
  <img src="nowosci/zestawabsolutnowosc (1).jpg" width="20%" height="200px">
  </div>
</div>

KOD CSS:

body
{
	
	color: #000000;
	font-family: 'Capriola';
	font-size: 18px;
	margin: 0;
	background-color: #EFEFEF;
	}



.produktywlinii
{
	width:100%;
	height:240px;
	margin: 0;
}
.produkt 
{
	display:inline;
	margin: 0;
}

 

Comments

<div class="produktywlinii">
   <img class="produkt" src="nowosci/biankakanapanowosc.jpg" width="20%" height="200px">
   <img class="produkt" src="nowosci/krzeslokrzyznowosc.jpg" width="20%" height="200px">
   <img class="produkt" src="nowosci/narozniktokyonowosc.jpg" width="20%" height="200px">
</div>

Powywalaj te DIVy w środku i daj wszystkim IMG klasę "produkt". Te DIVy są po prostu... zbędne! I zrób to jako listę najlepiej UL > LI > IMG.

height="200px"

Nie podaje się na końcu jednostki "px" w wartości atrybutu width i height w HTML. Domyślna wartość jaką podasz jest już w pikselach.

a więc powinno być:

height="200"

---

Nie mogę zrobić jako listę ponieważ, mam już menu na górze strony, a elementy(jeżeli się nie mylę) zostałyby potraktowane jako menu, ale dzięki za info, że nie potrzeba pixeli. Kolejny świetny sposób, z którego kiedyś skorzystam. Nie jestem jeszcze jakiś webmasterem, bo w liceum tego nie uczą :/.

---

Nie mogę zrobić jako listę ponieważ, mam już menu na górze strony

Od tego są klasy. Każdej z list dajesz inną nazwę klasy.

ul.menu { ... }

ul.zdjecia { ... }

<ul class="menu">

<ul class="zdjecia">

Answer 1

https://forum.pasja-informatyki.pl/239547/inline-block-poziome-menu?show=239572#a239572

Comments

flex usunęło mi przerwy między divami, ale zaczęły wyświetlać się pionowo, a nie poziomo tak jak powinny. a nie mogę dodać elementu li, bo zdjęcia zostaną potraktowane jak elementy menu (chyba, że nie mam racji).

---

a menu już mam

---

Nie bardzo wiem o co chodzi.
Btw proponuję usunąć atrybut width ze zdjęć

---

To jest tylko fragment kodu, w którym zawarty jest problem. Normalnie mam menu i jak dodam element li to zdjecia nie zostana potraktowane jako element menu? Atrybut widht potrzebny mi jest do zeskalowania zdjęć, tak aby zmieściły się po 5 na daną linijke, a nie są one wymiarowe.

---

Mogę cały wysłać, albo zdjęcie jak to wygląda na stronie.

---

https://codepen.io/Argeento/pen/MvOKqJ?editors=1100

---

Dzięki :D