Dlaczego elementy inline-block zostawiają odstęp między sobą?

Zacznij od ustalenia, co w danym układzie musi mieć stały wymiar. Obraz o określonej szerokości, przycisk czy panel nawigacji lepiej zapisać w pikselach albo za pomocą funkcji minmax. Dopiero resztę przestrzeni rozdzielaj jednostkami fr. Jeśli pomieszasz oba podejścia w jednej deklaracji, pamiętaj, że fr dzieli wyłącznie to, co zostało po odjęciu wartości stałych i przerw między kolumnami.

Pierwszy plik HTML zaczyna się od deklaracji typu dokumentu, If you cherished this short article and you would like to obtain additional facts regarding https://lebenskunst.berlin kindly visit our own internet site. czyli doctype. W HTML5 zapisuje się ją krótko: i umieszcza w pierwszej linii pliku, przed jakimkolwiek znacznikiem. To nie jest znacznik HTML, a instrukcja dla przeglądarki, że ma renderować stronę w trybie standardowym. Pominięcie doctype albo wpisanie go po komentarzu lub spacji przed nim wprowadza przeglądarkę w tryb quirks, w którym szerokości, marginesy i wysokości elementów zachowują się inaczej. Objawia się to rozjechanym układem, którego nie da się naprawić zwykłym stylem. Doctype piszemy małymi literami, bez zamykającego ukośnika i bez numeru wersji.

Na koniec sprawa, o której większość zapomina: przeglądarka nie pobiera czcionek z sieci, jeśli nie są zadeklarowane w regule @font-face. Sam wpis w font-family to tylko zapytanie do systemu. Dopóki nie podasz pliku fontu, użytkownik zobaczy to, co ma zainstalowane. Dlatego testuj stronę na maszynie bez twoich ulubionych krojów i patrz, co naprawdę się renderuje, zamiast zakładać, że wszyscy mają ten sam zestaw czcionek.

Position: fixed wyciąga element z normalnego przepływu dokumentu i przypina go do okna przeglądarki. Najczęstszy błąd to zapomnienie o tym, że element fixed przestaje zajmować miejsce w układzie. Treść pod nim wskakuje na samą górę i chowa się pod nagłówkiem. Rozwiązanie jest proste: dodaj do kontenera treści padding-top równy wysokości nagłówka albo ustaw stałą wysokość nagłówka i tę samą wartość wpisz jako margines. Uwaga na zmiany wysokości przy zawijaniu tekstu na węższych ekranach — sztywne wartości w pikselach przestają się zgadzać.

Drugi typowy problem to brak minimalnej szerokości. Gdy w kolumnie znajdzie się długi wyraz, tabela albo element osadzony, układ może się rozjechać. Rozwiązaniem jest minmax(0, 1fr) zamiast samego 1fr — zero pozwala kolumnie się kurczyć, a jednocześnie nie blokuje rozciągania. Podobnie warto ustawić min-width: 0 na elementach wewnątrz, jeśli korzystają z przewijania poziomego.

Jak wygląda dopasowanie, gdy nazwa już pasuje Gdy przeglądarka znajdzie dostępną rodzinę, sprawdza jeszcze, czy ma ona potrzebny krój, grubość i styl. Dla zapisu font-weight: przechowywanie w małym mieszkaniu 600 i font-style: italic wybierze najbliższy wariant w obrębie tej samej rodziny. Jeśli rodzina nie ma kursywy, przeglądarka może ją sztucznie pochylić lub pogrubić. To właśnie dlatego ten sam tekst wygląda inaczej na dwóch komputerach: jedna maszyna ma prawdziwy wariant, druga tylko podróbkę generowaną przez system.

Drugi częsty problem to kolejność. Wpisanie najpierw bardzo egzotycznej czcionki, a potem popularnej, nie ma sensu, jeśli egzotycznej nie ma prawie nikt. Zamiast tego podaj najpierw krój, który faktycznie chcesz mieć u większości odbiorców, a potem bezpieczne odpowiedniki o zbliżonych proporcjach. Uważaj też na nazwy zawierające spacje — muszą być w cudzysłowie, np. "Open Sans". Bez cudzysłowów przeglądarka potraktuje to jako kilka osobnych rodzin i część z nich pominie.

Na telefonach przyklejony nagłówek zjada cenny pionowy ekran. Zamiast trzymać pełny pasek z logo i menu, rozważ jego skrócenie po przewinięciu albo przyklejanie tylko na większych ekranach. Sprawdź też, czy po kliknięciu w link prowadzący do sekcji na stronie nagłówek nie zasłania jej początku — dodaj scroll-margin-top do celów kotwic. Testuj na prawdziwych urządzeniach, bo zachowanie sticky w połączeniu z klawiaturą ekranową bywa nieprzewidywalne.

Inne podejście to ujemny margin-left dopasowany do szerokości spacji. Działa szybko, ale jest kruchy: gdy zmieni się czcionka, rozmiar tekstu albo przeglądarka, wartość przestanie pasować. Można też po prostu zrezygnować z inline-block na rzecz flexboxa — kontener z display: flex sam usuwa odstępy między dziećmi, a przy okazji daje wyrównywanie i zawijanie wierszy bez kombinowania. To rozwiązanie, które wybierzesz, zależy od tego, czy modyfikujesz stary kod, czy piszesz nowy.

Trzeci błąd dotyczy odstępów. Odstęp między kolumnami jest odejmowany od wolnej przestrzeni, zanim trafi ona do fr. Przy dużych przerwach proporcje mogą wyglądać na zaburzone, choć matematyka się zgadza. Jeśli zależy ci na precyzyjnym podziale, zmniejsz odstęp albo przelicz wagi od nowa. Pamiętaj też, że fr nie działa w zwykłym przepływie blokowym — wymaga kontekstu grid lub flex z odpowiednimi ustawieniami.

Jak pozbyć się odstępu bez psucia semantyki Najprostsze rozwiązanie to usunięcie białych znaków w HTML — zapisanie znaczników jeden po drugim, bez spacji i bez przejścia do nowej linii. Działa, ale kod staje się nieczytelny, a przy większej liczbie elementów łatwo o pomyłkę. Lepszym sposobem jest ustawienie na rodzicu font-size: 0, a następnie przywrócenie właściwego rozmiaru czcionki wewnątrz samych elementów. Trzeba pamiętać o tym drugim kroku, bo inaczej zniknie cały tekst, a nie tylko szczelina.