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

Pusta przestrzeń pomiędzy blokami

VPS Starter Arubacloud
0 głosów
674 wizyt
pytanie zadane 30 maja 2019 w HTML i CSS przez Eliro Stary wyjadacz (12,160 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 2019 przez niezalogowany
wybrane 30 maja 2019 przez Eliro
 
Najlepsza
h2 -> margin: 0
komentarz 30 maja 2019 przez Eliro Stary wyjadacz (12,160 p.)
Jest lepiej, ale nadal jest drobna przestrzeń.
komentarz 30 maja 2019 przez niezalogowany
pomiędzy czym? prawdopodobnie nadal problemy z wypychającymi marginesami
komentarz 30 maja 2019 przez Eliro Stary wyjadacz (12,160 p.)
Nadal w tym samym miejscu.
komentarz 30 maja 2019 przez niezalogowany

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 2019 przez Chess Szeryf (76,710 p.)
edycja 30 maja 2019 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 2019 przez Eliro Stary wyjadacz (12,160 p.)
Faktycznie, przestrzeń się zmniejszyła, ale nadal widać białą kreseczkę.

Podobne pytania

+1 głos
2 odpowiedzi 445 wizyt
+1 głos
4 odpowiedzi 1,624 wizyt
0 głosów
1 odpowiedź 230 wizyt
pytanie zadane 11 września 2019 w HTML i CSS przez depus Nowicjusz (120 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...