Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF4 - TEST WIEDZY NR 1



PYTANIE NR 13.
Rozważ następujący fragment kodu CSS:
p {
  font-size: 16px;
  line-height: 24px;
}
Co oznacza wartość line-height w tym kontekście?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
line-height określa wysokość linii (obszaru, w którym układany jest wiersz tekstu). Dla line-height: 24px każda linia ma wysokość 24 piksele, co wpływa na odstęp między wierszami w połączeniu z font-size. Odpowiedzi z punktami (pt) nie pasują do jednostki podanej w kodzie.

Pełne wyjaśnienie:

W deklaracji stylu dla selektora p ustawiono font-size: 16px oraz line-height: 24px. Właściwość line-height opisuje wysokość linii (tzw. "pola linii" dla wiersza tekstu), czyli pionowy wymiar, w którym przeglądarka układa dany wiersz. Dlatego stwierdzenie "Wysokość linii tekstu wynosi 24 piksele." jest poprawne.

W praktyce to ustawienie wpływa na czytelność: przy rozmiarze pisma 16px wysokość linii 24px daje wyraźny "oddech" między wierszami, co poprawia komfort czytania dłuższych akapitów. Ważne jest jednak rozróżnienie: line-height nie jest dosłownie "odległością między liniami" rozumianą potocznie jako sama przerwa. Odstęp widoczny między wierszami wynika z relacji między wysokością linii a samym rysunkiem glifów (i metrykami fontu) oraz wielkością font-size.

Dlaczego pozostałe odpowiedzi są niepoprawne?

  • "Odległość między liniami tekstu wynosi 24 piksele." – upraszcza znaczenie. 24px to wysokość pola linii, a nie sama "szpara" pomiędzy wierszami; rzeczywisty odstęp wizualny zależy od wielu czynników (m.in. font-size i metryk kroju pisma).
  • "Wysokość linii tekstu wynosi 24 punkty." – jednostka jest sprzeczna z kodem. W kodzie użyto px, więc interpretacja w pt nie wynika z deklaracji.
  • "Odległość między liniami tekstu wynosi 24 punkty." – błąd podwójny: mylenie wysokości linii z odstępem oraz podmiana jednostki na punkty.

W kontekście kwalifikacji związanej z przygotowaniem publikacji cyfrowych ta umiejętność przekłada się na poprawne ustawianie parametrów typograficznych (np. akapitów, stylów tekstu) tak, aby projekt był czytelny i spójny wizualnie na ekranach.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest line-height w arkuszach stylów?
line-height to właściwość określająca wysokość linii (obszaru wiersza tekstu), w którym przeglądarka układa tekst. Wpływa na "oddech" między wierszami i czytelność akapitów, szczególnie w dłuższych blokach tekstu.
Dlaczego line-height nie jest tym samym co odstęp między wierszami?
Bo line-height ustala wysokość pola linii, a widoczna przerwa między wierszami zależy też od rozmiaru pisma i metryk kroju (np. wysokości glifów). Dlatego nie zawsze da się traktować line-height jako "samą przerwę".
Jak dobrać line-height do font-size w typografii ekranowej?
Praktycznie dobiera się line-height tak, by tekst był czytelny: zwykle nieco większy niż font-size. Dla akapitów często sprawdza się większa interlinia niż dla nagłówków, bo długie wiersze wymagają lepszego prowadzenia oka.
Kiedy lepiej użyć wartości bez jednostki dla line-height?
Wartość bez jednostki (np. 1.5) bywa wygodna, gdy chcesz zachować proporcję względem bieżącego rozmiaru pisma. Taka wartość skaluje się automatycznie przy zmianie font-size, co ułatwia spójny skład w responsywnych projektach.
Czy line-height dziedziczy się w CSS i co to oznacza w praktyce?
Tak, line-height może być dziedziczone, więc ustawienie go na elemencie nadrzędnym wpływa na elementy potomne. W praktyce pomaga to utrzymać spójny rytm typograficzny, ale wymaga kontroli, by np. przy małych podpisach nie zrobić zbyt dużej interlinii.
Jakie są najczęstsze błędy przy interpretacji line-height na egzaminie?
Najczęściej myli się wysokość linii z samą przerwą między wierszami oraz ignoruje jednostkę podaną w kodzie (np. px) i "przestawia" ją na punkty (pt). Błąd wynika z przenoszenia nawyków z DTP do środowiska webowego.
Dlaczego w kodzie użyto px, a nie pt, i co to zmienia?
px to jednostka powszechna w typografii ekranowej i stylach stron, a pt częściej kojarzy się z drukiem. Na egzaminie kluczowe jest czytanie kodu: jeśli w deklaracji jest "24px", poprawna interpretacja powinna pozostać w pikselach.
Jak line-height wpływa na skład akapitów w publikacji cyfrowej?
Zbyt małe line-height powoduje "zlewanie się" wierszy, a zbyt duże rozrywa akapit i pogarsza płynność czytania. W publikacjach cyfrowych (strony, e-booki, materiały marketingowe) właściwa interlinia poprawia czytelność i odbiór projektu.
Jak sprawdzić w przeglądarce, jaka jest realna wysokość linii tekstu?
Możesz użyć narzędzi deweloperskich i podejrzeć style elementu oraz jego metryki. W praktyce warto też testowo dodać tło lub obramowanie do elementu z tekstem, aby zobaczyć, jak zmiana line-height wpływa na pionowy rytm układu.
Jakie ustawienia line-height stosuje się dla nagłówków, a jakie dla akapitów?
Nagłówki często mają mniejszą interlinię (bo są krótsze i nie wymagają takiego prowadzenia oka), a akapity większą dla komfortu czytania. Kluczowe jest dopasowanie do kroju pisma i długości wiersza oraz zachowanie spójności w całej publikacji.
info

Statystycznie 76% uczniów zna prawidłową odpowiedź. średnio łatwe

Według specjalistów z branży: "line-height określa wysokość linii (obszaru, w którym układany jest wiersz tekstu)."

Źródła:

  • MDN Web Docs: "line-height" (CSS) – https://developer.mozilla.org/en-US/docs/Web/CSS/line-height - accessed 2026-02-27
  • MDN Web Docs: "font-size" (CSS) – https://developer.mozilla.org/en-US/docs/Web/CSS/font-size - accessed 2026-02-27
  • W3C/CSSWG Editor’s Draft: "CSS Inline Layout Module Level 3" (sekcje dot. line-height/line box; dokument roboczy) – https://drafts.csswg.org/css-inline-3/ - accessed 2026-02-27

Materiały:

  • Dokumentacja właściwości line-height w materiałach referencyjnych do arkuszy stylów
  • Podręczniki/opracowania z typografii cyfrowej i składu tekstu
  • Ćwiczenia praktyczne: porównanie różnych wartości line-height dla tego samego font-size w projekcie
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego