Za takie zachowanie odpowiedzialne są tzw. white-spaces pomiędzy kolejnymi div-ami
Sprawdź to ( zwykły znak komentarza <!-- --> )
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>kategorie</title>
<base href="sciezka do glownego folderu">
<style>
body {
margin: 0;
}
div {
float: left;
}
</style>
</head>
<body>
<div><a href="sciezka do kategorii"><img src="sciezka do zdjecia kategorii" alt="tytul kategorii"></img></a></div><!--
--><div><a href="sciezka do kategorii"><img src="sciezka do zdjecia kategorii" alt="tytul kategorii"></img></a></div><!--
--><div><a href="sciezka do kategorii"><img src="sciezka do zdjecia kategorii" alt="tytul kategorii"></img></a></div><!--
--><div><a href="sciezka do kategorii"><img src="sciezka do zdjecia kategorii" alt="tytul kategorii"></img></a></div>
<div><a href="sciezka do kategorii"><img src="sciezka do zdjecia kategorii" alt="tytul kategorii"></img></a></div>
<div><a href="sciezka do kategorii"><img src="sciezka do zdjecia kategorii" alt="tytul kategorii"></img></a></div>
<div><a href="sciezka do kategorii"><img src="sciezka do zdjecia kategorii" alt="tytul kategorii"></img></a></div>
</body>
</html>
jest i taki tick,
div:not(:first-child) {
margin-left: -4px;
}
ale jak już wspomnieli @wizarddos i @SzkolnyAdmin, też polecam "przejście" na grid-a lub flex-a.
Sprawa czy stosować float, czy nie do tworzenia layout-u nie jest jednoznacznie "przesądzona" (nie mówi się wprost, żeby przestać używać float do tego celu, ale ...)
Floats - MDM
Originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of flexbox and grid it's now returned to its original purpose, as this article explains.
P.S. Częściej stosowany jest zapis ( * - universal selectors )
* {
margin: 0;
padding: 0;
border: 0;
}
niż
body {
margin: 0;
. . .
}