• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed usunięcie odstępu między divami

Object Storage Arubacloud
+1 głos
454 wizyt
pytanie zadane 9 października 2021 w HTML i CSS przez toko Dyskutant (8,030 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 Dyskutant (8,030 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

+2 głosów
odpowiedź 10 października 2021 przez VBService Ekspert (254,630 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;
  . . .
}

 

+1 głos
odpowiedź 9 października 2021 przez wizarddos Nałogowiec (26,050 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,160 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.
1
komentarz 9 października 2021 przez wizarddos Nałogowiec (26,050 p.)
No tak ale lepiej używać grida lub flexboxa
komentarz 9 października 2021 przez toko Dyskutant (8,030 p.)

@wizarddos, zerowanie marginu nie pomaga

komentarz 9 października 2021 przez wizarddos Nałogowiec (26,050 p.)
A czy linki mają jakiś margin lub padding?
komentarz 9 października 2021 przez toko Dyskutant (8,030 p.)

@wizarddos,   ani margin ani padding nie ustawiałem, po ustawieniu na zero bez zmian

komentarz 9 października 2021 przez wizarddos Nałogowiec (26,050 p.)
dasz więcej styli dla diva? Oczywiście jeśli masz
1
komentarz 9 października 2021 przez SzkolnyAdmin Szeryf (87,020 p.)

@radek024, i tylko do tego obecnie należy go używać, a nie do wykonania struktury strony.

@toko, jak ci radził wizarddos użyj flexa lub grida, a twoje problemy z marginesami znikną jak ręką odjął.

Aktualnie toczy się  zresztą  podobna dyskusja:

https://forum.pasja-informatyki.pl/552205/margin-bottom-nie-dziala-w-gore#a552210

+1 głos
odpowiedź 10 października 2021 przez pablop76 VIP (123,180 p.)
edycja 10 października 2021 przez pablop76

Jest to spowodowane tym, że img jest elementem liniowo blokowym, zmień na element blokowy i będzie ok. Ale zastanów się nad konsekwencjami tego zabiegu, może nie warto zmieniać wszystkich img na stronie.

img{
display: block;
}

 

Podobne pytania

0 głosów
2 odpowiedzi 965 wizyt
pytanie zadane 5 maja 2020 w HTML i CSS przez ptomeccc Użytkownik (800 p.)
0 głosów
5 odpowiedzi 3,380 wizyt
pytanie zadane 16 kwietnia 2017 w HTML i CSS przez JKluseczka Obywatel (1,430 p.)
–1 głos
1 odpowiedź 541 wizyt
pytanie zadane 4 października 2017 w HTML i CSS przez Wojtaz Nowicjusz (240 p.)

92,702 zapytań

141,616 odpowiedzi

320,180 komentarzy

62,062 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...