Linia bazowa czy górna krawędź — co wyrównuje inline-block

Podsumowując: domyślnie inline-block wyrównuje się do linii bazowej, a nie do górnej krawędzi. Gdy potrzebujesz równego startu od góry, użyj vertical-align: top na wszystkich elementach w wierszu. Gdy zależy ci na równym dole, sięgnij po bottom. A jeśli układ jest bardziej złożony niż kilka kafelków w jednej linii, flexbox załatwi sprawę prościej i bez walki z białymi znakami. Sprawdź w narzędziach deweloperskich, gdzie faktycznie przebiega linia bazowa twojego elementu — to oszczędza najwięcej czasu przy diagnozowaniu nierówności.

Warto najpierw ustalić, co w danym układzie jest punktem odniesienia. Linia bazowa to umowne miejsce, na którym „siedzą" litery bez wydłużeń, czyli bez ogonków takich jak „g" czy „y". Gdy do takiej linii dopasujesz inline-block, jego dolna krawędź trafi dokładnie na tę linię. Z kolei wartości top, middle, bottom pozwalają przesunąć element względem całego wiersza, a nie tylko względem samego tekstu. Najczęstszy błąd polega na mieszaniu tych dwóch porządków: ktoś ustawia vertical-align: top i dziwi się, że element nadal nie styka się z górną krawędzią sąsiada, bo ten sąsiad jest wyrównany do linii bazowej.

Prosty wykres to przypadek szczególny. Składa się z cienkich linii, siatki, etykiet i często jednolitych słupków. Tu JPEG bywa złym wyborem, bo rozmywa cienkie linie i tworzy wokół nich artefakty. Najlepiej sprawdzi się SVG — wykres jest wtedy ostry na każdym ekranie i łatwo go powiększyć. Jeśli wykres ma być osadzony w dokumencie lub wydrukowany, wybierz PDF albo PNG w wysokiej rozdzielczości. Przy eksporcie wykresu do PNG ustaw rozdzielczość co najmniej dwukrotnie większą niż docelowa, aby uniknąć rozmycia na ekranach o wysokiej gęstości pikseli.

Uważaj na kilka typowych pułapek. Nie wklejaj tego samego alt do galerii zdjęć — każdy kadr opisuj osobno, chyba że różnice są nieistotne i cała galeria pełni jedną funkcję. Nie zostawiaj alt z nazwą pliku ani z ciągiem „image1". Nie wstawiaj do alt słów kluczowych dla wyszukiwarki: przechowywanie w małym mieszkaniu to szkodzi użytkownikom, bo opis staje się bełkotem. Nie dubluj alt treścią widocznego podpisu pod zdjęciem — jeśli podpis już wszystko mówi, alt może być pusty.

Przy ikonach wielokolorowych i fotorealistycznych (np. miniatura produktu) sensowny bywa też WebP, który łączy przezroczystość z dobrą kompresją. Trzeba jednak pamiętać o starszych przeglądarkach lub systemach, które mogą wymagać pliku zapasowego w PNG. Nie ma jednego uniwersalnego rozwiązania — liczy się kontekst użycia.

Drugi sposób to warunki ładowania. Czcionki webowe pobierane z sieci mogą się nie wczytać z powodu blokad, wolnego łącza albo złej ścieżki. Wtedy przeglądarka przechodzi do kolejnej pozycji w stosie i wygląd się zmienia. W panelu sieci sprawdź, czy plik czcionki został pobrany z kodem powodzenia. Brak żądania oznacza, https://Lebenskunst.berlin/index.php?title=Flex_a_elementy_blokowe:_kiedy_znika_nowa_linia_w_tekście że przeglądarka w ogóle nie próbowała go użyć — bo uznała, że nie jest potrzebny, albo nie znalazła reguły @font-face.

Na koniec najważniejsza zasada: nie wybieraj formatu „na zapas", tylko pod miejsce, w którym plik będzie używany. Ikona w aplikacji, zdjęcie na stronie i wykres w prezentacji mają inne wymagania. Sprawdź, czy potrzebna jest przezroczystość, czy zależy ci na ostrych liniach, czy plik będzie jeszcze edytowany. Dopiero potem sięgaj po konkretny format. Dzięki temu unikniesz zarówno przepakowanych plików, jak i rozmazanych obrazów, które psują odbiór całości.
Zacznij od pytania, po co ten obrazek w ogóle jest na stronie. Jeśli niesie informację — wykres, schemat, zdjęcie produktu, zrzut ekranu — alt musi tę informację streścić. Jeśli jest wyłącznie dekoracją, np. tło sekcji albo ozdobny separator, alt powinien być pusty: alt="". Pusty atrybut to nie to samo co jego brak. Brak alt sprawia, że czytnik odczyta nazwę pliku; pusty alt mówi mu wyraźnie: pomiń ten element. To najczęstszy błąd przy wstawianiu grafik ozdobnych.
Sprawdź efekt bez zgadywania. Wyłącz w przeglądarce ładowanie obrazów i przejrzyj stronę: w miejscu każdej grafiki powinien pojawić się sensowny tekst albo nic. Włącz czytnik ekranu i przejdź stronę od góry do dołu — jeśli któryś opis brzmi jak nazwa pliku, wróć do kodu. Zwróć uwagę na obrazy w przyciskach i linkach: alt staje się tam etykietą, więc „ikona koszyka" to za mało, lepiej „przejdź do koszyka". Gdy poprawisz te miejsca, strona działa zarówno dla kogoś, komu nie wczytał się obraz, jak i dla kogoś, kto w ogóle go nie zobaczy.

Na koniec: nie opieraj się na samym wyglądzie. Dwie różne czcionki mogą być łudząco podobne. Jeśli zależy ci na pewności, sprawdź wyliczoną wartość w narzędziach, porównaj metryki tekstu i zweryfikuj, czy plik czcionki rzeczywiście się pobrał. Dopiero komplet tych sygnałów daje odpowiedź, która czcionka ze stosu faktycznie się wyświetla.

Should you have just about any inquiries with regards to where by in addition to tips on how to employ Lebenskunst.Berlin, it is possible to e mail us on the web page.