Hoe los ik dit op in html/css?

twee puntjes waar het miss mee lukt:

zit er geen margin tussen?
is de img niet te groot?

Je kunt proberen om een css reset te implementeren.

Browsers hebben nog wel eens verschillende standaarden, en met zo'n reset, stel je die voor alle browsers gelijk.

Ook stelt hij alle margins/paddings/borders etc in op 0, waardoor je kans hebt dat die ene pixel zal verdwijnen.

Nadeel is alleen, dat als je al een hoop css hebt, dat deze nog wel eens door de war gegooid worden, waardoor je een hoop aan moet passen in je oude css.

http://meyerweb.com/eric/tools/css/reset/

Die vraag is helaas niet zo te beantwoorden want afhankelijk van aardig wat factoren vooral:
1. Browsertype en -versie
2. CSS/HTML-versie.

Bovendien: Waarom zou je je druk maken om 1 pixel in de tegenwoordige resoluties van 1024 en soms zelfs meer. Ik heb 'in de beginne' nog gewerkt met resoluties van maximaal 640 pixels horizontaal en zat er ook nog een apparatuurgebonden maximum aan het verticale en dat was nog lager, als ik goed onthouden heb 400 in theorie (in de praktijk 320). Dat waren andere tijden. Ik word er bijna nostalgisch van :-D

Hebben deze div's een border of zit er een 1px spacing tussen de twee div's. In het geval van een spacing kun je in de margin veranderen, dan doe je bijvoorbeeld de onderste div met een "margin-top: -1px" waardoor die div met 1px omhoog zal gaan.