Kliknięcie w etykietę ustawia kursor w polu — i co z tego wynika

2026-10-19T09:43:44Z

AdrieneBegley: Utworzono nową stronę "display: inline wstawia element w nurt tekstu. Nie da się mu ustawić szerokości ani wysokości — te właściwości są ignorowane. Padding i margines działają tylko w poziomie; pionowe wartości nachodzą na sąsiednie linie i nie powiększają wysokości rodzica. Dlatego link czy span z dużym paddingiem wygląda dobrze, ale kontener go nie obejmuje. Kolejna pułapka: spacje i entery między elementami inline tworzą widoczne odstępy, których nie da się…"

display: inline wstawia element w nurt tekstu. Nie da się mu ustawić szerokości ani wysokości — te właściwości są ignorowane. Padding i margines działają tylko w poziomie; pionowe wartości nachodzą na sąsiednie linie i nie powiększają wysokości rodzica. Dlatego link czy span z dużym paddingiem wygląda dobrze, ale kontener go nie obejmuje. Kolejna pułapka: spacje i entery między elementami inline tworzą widoczne odstępy, których nie da się usunąć marginesem. Ustawienie position: absolute na elemencie sprawia, że zaczyna on żyć w oderwaniu od normalnego przepływu dokumentu. Pozostali sąsiedzi go nie widzą, nie robią mu miejsca, a on sam nie wpycha się między nich. Żeby jednak wiedzieć, gdzie dokładnie się znajdzie, przeglądarka musi znaleźć punkt odniesienia. Tym punktem jest najbliższy przodek, który ma ustawione position inne niż static — czyli relative, absolute, fixed albo sticky. Gdy takiego przodka brak, element pozycjonuje się względem początkowego bloku zawierającego, najczęściej okna przeglądarki. To dlatego absolut bez rodzica z relative potrafi wylądować w losowym miejscu strony. Najczęstszy i najbezpieczniejszy wzorzec to para: rodzic z position: relative, dziecko z position: absolute. Rodzic nie zmienia swojego położenia, bo relative bez przesunięć nie rusza go z miejsca, ale staje się punktem odniesienia. Dziecko ustawiasz wtedy przez top, right, bottom i left, liczone od krawędzi rodzica. Wartości procentowe odnoszą się do wymiarów rodzica, więc top: 50% oznacza połowę jego wysokości, a nie wysokości okna. Praktyczna zasada jest prosta: kompresję traktuj jako ostatni krok, zapisuj raz, a jeśli musisz poprawić plik, wróć do wersji roboczej. Kiedy artefakty już wystąpią, nie da się ich cofnąć bez ponownego przetworzenia całego zdjęcia. Receptą nie jest podbijanie ostrości, lecz ograniczenie liczby stratnych zapisów i świadome dobranie formatu do przeznaczenia obrazu. Przy zagnieżdżonych siatkach pamiętaj, że jednostka fr działa w kontekście najbliższego kontenera grid. Jeśli wewnątrz kolumny umieścisz kolejny grid z własnymi kolumnami fr, nie dziedziczy on podziału z zewnątrz. To częste źródło zdziwienia, gdy wewnętrzna siatka „nie chce" wyrównać się do zewnętrznej. Rozwiązaniem jest albo jawne ustawienie tych samych proporcji, albo użycie subgrid, jeśli przeglądarki, na których ci zależy, to wspierają. Co ustawić, żeby górna krawędź i linia bazowa przestały walczyć Najprościej sięgnąć po właściwość vertical-align. Wartość top wyrównuje górną krawędź elementu do górnej krawędzi najwyższego elementu w linii. Wartość bottom robi to samo z dolną krawędzią. Wartość middle ustawia środek elementu na wysokości połowy wysokości x fontu — to przydaje się przy ikonach obok tekstu. Wartość baseline zostawia domyślne zachowanie i właśnie ona najczęściej psuje układ. Warto pamiętać, że vertical-align działa tylko na elementach inline i inline-block, a nie na blokach ani elementach flex. Praktyczna zasada jest krótka: nadaj przodkowi relative tylko wtedy, gdy naprawdę ma być punktem odniesienia dla absolutnego dziecka, i upewnij się, że ma wymiary. Dla elementów, które mają zostać w przepływie i tylko lekko się przesunąć, użyj relative bez absolutnego potomka. Gdy potrzebujesz przypiąć coś do okna, a nie do kontenera, wybierz fixed i nie szukaj na siłę rodzica z relative. Jak ograniczyć widoczne artefakty na krawędziach Zacznij od tego, żeby zdjęcie zapisywać raz, na końcu obróbki, i w najwyższej jakości, jaką akceptuje docelowe zastosowanie. Jeśli plik ma trafić do druku, wybierz format bezstratny albo bardzo wysoką jakość. Przy publikacji w sieci zapisz kopię roboczą w formacie bezstratnym, a wersję końcową wygeneruj dopiero po wszystkich korektach. Unikaj zapisu pośredniego tylko po to, żeby coś sprawdzić — do podglądu używaj pliku roboczego, nie wynikowego. Kiedy musisz zmniejszyć rozdzielczość, zrób to przed kompresją, a nie po niej. Wyostrzanie wykonuj delikatnie i zawsze przed ostatnim zapisem, nie po nim. Jeśli krawędzie są bardzo kontrastowe, rozważ zapis w formacie, który nie dzieli obrazu na bloki, albo w formacie stratnym nowszej generacji. Gdy elementy inline-block mają różne wysokości i mają tworzyć równy rząd, najpewniejszym rozwiązaniem jest zmiana kontekstu formatowania. Ustawienie na rodzicu display: flex likwiduje cały problem, bo elementy przestają być traktowane jak znaki i nie mają linii bazowej do wyrównania. Jeśli flex nie jest możliwy, można zastosować float, ale wtedy trzeba pamiętać o czyszczeniu i o tym, że float również wypada z normalnego przepływu. Ostatnia deska ratunku to font-size: 0 na rodzicu i przywrócenie rozmiaru na dzieciach — działa, ale utrudnia utrzymanie kodu i bywa źródłem błędów przy dostępności.

Użytkownik:AdrieneBegley

2026-10-19T09:43:43Z

AdrieneBegley: Utworzono nową stronę "Miłośnik urządzania mieszkań od kilku lat. Dzielę się tym, jak wycisnąć maksimum z małego metrażu. Najbardziej lubię proste rozwiązania, które da się zrobić samemu."

Miłośnik urządzania mieszkań od kilku lat. Dzielę się tym, jak wycisnąć maksimum z małego metrażu. Najbardziej lubię proste rozwiązania, które da się zrobić samemu.

Mazovia - Wkład użytkownika [pl]

Kliknięcie w etykietę ustawia kursor w polu — i co z tego wynika

Użytkownik:AdrieneBegley