Zła czcionka w stosie, o której nikt nie pamięta

2026-10-19T18:29:38Z

AgustinFreytag: Die Seite wurde neu angelegt: „W pionowym układzie strony marginesy sąsiadujących elementów blokowych nie sumują się. Górny margines jednego akapitu i dolny margines następnego stykają się i przeglądarka wybiera większą z tych wartości. Jeśli nad akapitem stoi 24 piksele odstępu, a pod nim 16, między nimi będzie 24, a nie 40. Mechanizm nazywa się zapadaniem marginesów i dotyczy wyłącznie kierunku pionowego. Poziome odstępy zawsze się sumują. Na koniec: n…“

W pionowym układzie strony marginesy sąsiadujących elementów blokowych nie sumują się. Górny margines jednego akapitu i dolny margines następnego stykają się i przeglądarka wybiera większą z tych wartości. Jeśli nad akapitem stoi 24 piksele odstępu, a pod nim 16, między nimi będzie 24, a nie 40. Mechanizm nazywa się zapadaniem marginesów i dotyczy wyłącznie kierunku pionowego. Poziome odstępy zawsze się sumują. Na koniec: nie mieszaj tej techniki z ręcznie wpisanymi grid-column na kartach. Po zmianie liczby kolumn takie przypisania zaczną przeskakiwać w losowe miejsca. Jeśli naprawdę potrzebujesz rozpięcia elementu na dwa tory, użyj grid-column: span 2 i przetestuj układ przy najwęższym możliwym oknie. Cała siła tej metody polega na tym, że reguła jest jedna i opisuje zależność, a nie konkretny ekran. Pierwszy krok to diagnoza. Otwórz narzędzia deweloperskie, zaznacz kontener i sprawdź, czy między elementami pojawia się odstęp, którego nie ma w CSS. Wartość często wynosi kilka pikseli i zależy od rozmiaru oraz kroju fontu użytego w kontenerze. Zmiana font-size na zero ukrywa problem tylko pozornie — dziedziczenie potrafi zepsuć wygląd tekstu wewnątrz elementów, więc to rozwiązanie wymaga przywrócenia rozmiaru czcionki w każdym dziecku. Działa, ale bywa kłopotliwe w utrzymaniu. Kontener flex rozdziela wolną przestrzeń między elementy proporcjonalnie do ich współczynnika flex-shrink i szerokości bazowej. Jeśli suma szerokości bazowej przekracza dostępne miejsce, nadwyżka jest odejmowana od każdego elementu. Element z większą szerokością bazową straci proporcjonalnie więcej pikseli. Efekt bywa zaskakujący: wąski element może w ogóle nie ucierpieć, a szeroki skurczy się mocno, mimo że miał sztywne width. Typowy błąd to poleganie wyłącznie na width bez sprawdzenia, czy element nie jest przypadkiem elementem flex. Wiele osób ustawia width: 200px i dziwi się, że po dodaniu kilku elementów obok siebie szerokość się zmienia. Warto wtedy zajrzeć do inspektora i sprawdzić obliczoną wartość flex-shrink. Inny częsty problem to kontener z flex-wrap: nowrap — wtedy elementy nigdy nie przejdą do nowej linii, więc będą się kurczyć bez końca, aż do osiągnięcia min-width lub zera. Uważaj też na czcionki zależne od wagi i stylu. Jeśli w stosie jest krój o wadze 400, a element wymaga 600, przeglądarka może podstawić zupełnie inny, jeśli ten pierwszy nie ma takiego wariantu. W panelu deweloperskim zobaczysz wtedy ostrzeżenie o syntetycznym pogrubieniu. Podobnie bywa z kursywą. Sam wybór z listy to jeszcze nie koniec — liczy się, czy dany krój ma realnie potrzebny wariant. Każdy element HTML ma domyślny sposób zajmowania miejsca w układzie strony. Zanim zaczniesz ustawiać szerokości, marginesy i wyrównania, musisz wiedzieć, czy dany element jest block, inline czy inline-block. Od tego zależy, czy będzie rozpychał sąsiadów w pionie, czy tylko w linii tekstu, i czy w ogóle zareaguje na width oraz height. Zanim zmienisz display, sprawdź w narzędziach deweloperskich, jak element zachowuje się domyślnie. Często wystarczy drobna korekta, a nie przepisywanie całego układu. Pamiętaj też, że display: none usuwa element z przepływu, a visibility: hidden tylko go ukrywa, zostawiając puste miejsce. Te dwie właściwości mylone są nagminnie i potrafią zepsuć zarówno układ, jak i dostępność strony. Sprawdzanie przez JavaScript i pułapka fałszywych wyników Możesz też posłużyć się skryptem. Technika polega na tym, że mierzysz szerokość znaku w danej czcionce i porównujesz ją z szerokością trzech czcionek zapasowych — jeśli wynik jest identyczny, krój najpewniej nie istnieje i system podstawił domyślny. To działa, ale ma słabość: bywają kroje o zbliżonych metrykach, które dają ten sam pomiar i test zwraca fałszywy negatyw. Dlatego nigdy nie opieraj się wyłącznie na jednym znaku ani na jednym rozmiarze. Najwięcej problemów pojawia się, gdy mieszasz typy bez świadomości konsekwencji. Element block wewnątrz inline jest niepoprawny semantycznie i przeglądarka może go naprawiać po swojemu. Z kolei display: inline-block na rodzicu nie sprawi, że dzieci będą w jednej linii — to zależy od ich własnego display. Jeśli elementy mają tworzyć siatkę, lepiej użyć flex lub grid niż walczyć z inline-block i whitespace. Do prostych przypadków — pojedynczy przycisk obok tekstu, ikona z podpisem — inline-block wciąż jest najszybszym rozwiązaniem. Typowy błąd to wpisanie nazwy czcionki bez cudzysłowów, gdy składa się z kilku słów. Wtedy przeglądarka potraktuje każdy wyraz jako osobny kandydat. Drugi częsty problem: stos kończy się na nazwie, której nie ma na żadnej platformie, i cały tekst ląduje w domyślnym kroju szeryfowym lub bezszeryfowym. Zawsze zostawiaj na końcu ogólną rodzinę, taką jak serif, sans-serif albo monospace.

Benutzer:AgustinFreytag

2026-10-19T18:29:36Z

AgustinFreytag: Die Seite wurde neu angelegt: „Miłośnik praktycznego designu od kilku lat. Dzielę się tym, jak łączyć wygodę z ładnym wnętrzem. Najbardziej lubię zmiany, które widać od pierwszego dnia.“

Miłośnik praktycznego designu od kilku lat. Dzielę się tym, jak łączyć wygodę z ładnym wnętrzem. Najbardziej lubię zmiany, które widać od pierwszego dnia.

Rettungsdienst-Wiki - Benutzerbeiträge [de]

Zła czcionka w stosie, o której nikt nie pamięta

Benutzer:AgustinFreytag