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

Pusta przestrzeń pomiędzy blokami

0 głosów
60 wizyt
pytanie zadane 30 maja w HTML i CSS przez Eliro Stary wyjadacz (11,130 p.)
Usiłuję utworzyć sobie prostą stronę typu One Page. Niestety pojawiła mi się pusta przestrzeń pomiędzy nagłówkiem, a sekcjami i nijak nie mogę się jej pozbyć. O co tu chodzi?

https://codepen.io/anon/pen/QRZZoO

2 odpowiedzi

0 głosów
odpowiedź 30 maja przez argeento Szeryf (97,340 p.)
wybrane 30 maja przez Eliro
 
Najlepsza
h2 -> margin: 0
komentarz 30 maja przez Eliro Stary wyjadacz (11,130 p.)
Jest lepiej, ale nadal jest drobna przestrzeń.
komentarz 30 maja przez argeento Szeryf (97,340 p.)
pomiędzy czym? prawdopodobnie nadal problemy z wypychającymi marginesami
komentarz 30 maja przez Eliro Stary wyjadacz (11,130 p.)
Nadal w tym samym miejscu.
komentarz 30 maja przez argeento Szeryf (97,340 p.)

clear: both na firefoxsie coś psuje i dodaje ten 1px. Zachęcam do skorzystania w tym miejscu z flexa, zamiast floatów

0 głosów
odpowiedź 30 maja przez Chess Maniak (68,770 p.)
edycja 30 maja przez Chess

Dodaj tę linię

section.first h2 {
  /* ... */
  margin: 0;
}

Dzieje się tak, ponieważ przeglądarki mają swoje domyślne style i czasem, gdy się nie chce określonego efektu, to trzeba "wyzerować"/zresetować ten styl.

Sprawdzając w narzędziach deweloperskich, te style, itp. wygląda to tak (dla user agent)

h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

Używaj narzędzi deweloperskich F12 oraz sprawdź domyślne style znacznika h2 na w3.org.

Staraj się pisać z jakiej przeglądarki korzystasz, ponieważ na Chrome czegoś takiego nie zauważyłem. Zgodnie z tą poradą davidwalsh.name, wystarczy napisać tak:

header {
  font-size: 0;
}

header * {
  font-size: 16px;
}

Możesz też wykomentować białe znaki, używając komentarza <!-- ... -->.

komentarz 30 maja przez Eliro Stary wyjadacz (11,130 p.)
Faktycznie, przestrzeń się zmniejszyła, ale nadal widać białą kreseczkę.

Podobne pytania

0 głosów
1 odpowiedź 67 wizyt
pytanie zadane 23 maja w HTML i CSS przez tgv Początkujący (400 p.)
0 głosów
0 odpowiedzi 30 wizyt
pytanie zadane 11 maja w HTML i CSS przez Jakub 0 Stary wyjadacz (13,310 p.)
0 głosów
0 odpowiedzi 201 wizyt
pytanie zadane 30 listopada 2018 w HTML i CSS przez tgv Początkujący (400 p.)
Porady nie od parady
Publikując kody źródłowe korzystaj ze specjalnego bloczku koloryzującego składnię (przycisk z napisem code w edytorze). Nie zapomnij o ustawieniu odpowiedniego języka z rozwijanego menu oraz czytelnym formatowaniu kodu.Przycisk code

65,727 zapytań

112,367 odpowiedzi

237,225 komentarzy

46,687 pasjonatów

Przeglądających: 126
Pasjonatów: 0 Gości: 126

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...