usunięcie odstępu między divami

pytanie zadane 9 października 2021 w HTML i CSS przez toko Mądrala (6,010 p.)
zamknięte 13 października 2021 przez toko

Mam problem z odstępem między divami. Divy mają być poukładane obok siebie bez odstępu, ale z nie wiem jakiego powodu jest kilkupixelowy odstęp pod każdym divem. Jak to naprawić?

<!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>

komentarz zamknięcia: rozwiązanie problemu

komentarz 13 października 2021 przez toko Mądrala (6,010 p.)

Dziękuję bardzo wszystkim za pomoc.

Działa:

div:not(:first-child) { margin-left: -4px; }
img { display: block; }
flexbox/grid

Nie działa:

zerowanie margin, padding, border
usuwanie white-spaces

Zamykam temat.

3 odpowiedzi

odpowiedź 10 października 2021 przez VBService Ekspert (246,070 p.)
edycja 10 października 2021 przez VBService

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;
  . . .
}

odpowiedź 9 października 2021 przez wizarddos Pasjonat (24,860 p.)

Po pierwsze wyzeruj margin dla divów

Po drugie spróbuj zamiast przestarzałego float lefta użyć flexboxa lub grida

2	komentarz 9 października 2021 przez radek024 Szeryf (77,180 p.) Float nie jest przestarzały, to również metoda układania elementów na stronie — domyślnie float służył do otaczania grafik tekstem, tak jak mamy to w Wordzie.