Pusta przestrzeń pomiędzy blokami

Question

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

Answer 1

h2 -> margin: 0

Comments

Jest lepiej, ale nadal jest drobna przestrzeń.

---

pomiędzy czym? prawdopodobnie nadal problemy z wypychającymi marginesami

---

Nadal w tym samym miejscu.

---

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

Answer 2

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

Comments

Faktycznie, przestrzeń się zmniejszyła, ale nadal widać białą kreseczkę.