Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - STYCZEŃ 2021



PYTANIE NR 28.
Formatowanie CSS akapitu określa styl szarej ramki o cechach:
Ilustracja przedstawia fragment kodu CSS, który jest używany do formatowania akapitu.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź opisuje ramkę z linią kropkową (border-style: dotted) o grubości 2 px (border-width: 2px) oraz odstęp między tekstem a ramką 15 px, czyli padding. Odpowiedzi z "marginesem poza ramką" dotyczą margin, a nie odstępu wewnątrz obramowania.

Pełne wyjaśnienie:

Opis "szarej ramki" w CSS odnosi się do obramowania elementu, czyli właściwości z rodziny border. Ramkę charakteryzują m.in.:

  • border-style – rodzaj linii (np. dotted/kropkowa, solid/ciągła, dashed/kreskowa),
  • border-width – grubość obramowania (np. 2px),
  • border-color – kolor (tu: szary).

Kluczowe jest też rozróżnienie, gdzie powstaje "odstęp":

  • padding to odstęp wewnętrzny – przestrzeń między treścią (tekstem) a obramowaniem. Gdy w odpowiedzi jest "margines pomiędzy tekstem a ramką 15 px", chodzi praktycznie o padding: 15px.
  • margin to odstęp zewnętrzny – przestrzeń poza ramką, oddzielająca element od innych elementów.

Dlatego poprawny wariant łączy: kropkowy styl linii + grubość 2 px + 15 px jako odstęp między tekstem a ramką (czyli padding).

Dlaczego pozostałe odpowiedzi są błędne?

  • "Linia ciągła; grubość 2 px; marginesy pomiędzy tekstem a ramką 15 px." – błędny rodzaj linii (solid zamiast dotted).
  • "Linia kreskowa; grubość 2 px; marginesy poza ramką 15 px." – błędne miejsce odstępu: opisuje margin, a nie odstęp wewnętrzny; dodatkowo styl dashed nie jest kropkowy.
  • "Linia ciągła; grubość 2 px; marginesy poza ramką 15 px." – jednocześnie błędny styl linii i błędne pojęcie odstępu (margin zamiast padding).

W praktyce warto zapamiętać skrót: padding = w środku, margin = na zewnątrz. To bardzo często pojawia się w zadaniach o formatowaniu bloków tekstu.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co w CSS oznacza linia kropkowa ramki?
"Linia kropkowa" oznacza styl obramowania ustawiany właściwością border-style na wartość dotted. Taki border składa się z kropek, a nie z odcinków (dashed) ani z linii ciągłej (solid).
Jak ustawić grubość ramki na 2 px w CSS?
Grubość obramowania ustawia się właściwością border-width, np. border-width: 2px;. Często stosuje się też skrót border: 2px dotted gray;, który jednocześnie ustawia szerokość, styl i kolor.
Co to jest padding i gdzie się znajduje?
Padding to odstęp wewnątrz elementu: między treścią (np. tekstem) a obramowaniem. Jeśli zadanie mówi o "odstępie między tekstem a ramką", to zwykle chodzi właśnie o padding, a nie o margin.
Co to jest margin i czym różni się od padding?
Margin to odstęp na zewnątrz ramki elementu, czyli przestrzeń między elementem a sąsiadami. Padding jest wewnątrz ramki. Najprościej: margin "odsuwa element od innych", padding "odsuwa treść od ramki".
Jakie są różnice między dotted, dashed i solid?
dotted daje kropki, dashed daje krótkie kreski/odcinki, a solid daje linię ciągłą. W testach mylące jest to, że dotted i dashed są nieciągłe, więc trzeba rozpoznać, czy są to kropki czy odcinki.
Dlaczego "marginesy poza ramką" nie opisują odstępu od tekstu?
Bo "poza ramką" oznacza przestrzeń zewnętrzną, czyli margin. Odstęp od tekstu do obramowania jest wewnątrz elementu i realizuje go padding. To typowa pułapka zadań o modelu pudełkowym CSS.
Jak zapisać jedną deklarację CSS dla szarej kropkowej ramki?
Najczęściej używa się skrótu: border: 2px dotted gray; oraz osobno odstępu wewnętrznego: padding: 15px;. Wtedy kropkowa ramka ma 2 px grubości, a tekst jest odsunięty od obramowania.
Czy tag <p> zawsze ma domyślne marginesy w przeglądarce?
W większości arkuszy domyślnych przeglądarek element <p> ma ustawione marginesy (np. odstęp nad i pod akapitem). Dlatego w praktyce często trzeba je nadpisać w CSS, aby uzyskać precyzyjny układ.
Jak sprawdzić w DevTools, czy to padding czy margin?
W narzędziach deweloperskich (zakładka Computed lub panel Box Model) zobaczysz osobno wartości margin, border i padding. To najszybsza metoda weryfikacji, skąd bierze się odstęp widoczny na stronie.
Jakie błędy najczęściej robi się w zadaniach o ramkach CSS?
Najczęstsze błędy to: mylenie padding z margin, mylenie dotted z dashed oraz pomijanie, że "grubość 2 px" dotyczy obramowania (border-width), a nie np. odstępów. Pomaga rozpisanie cech na trzy osobne właściwości.
info

To pytanie poprawnie rozwiązuje 51% zdających egzamin. trudne

Eksperci podkreślają: "Poprawna odpowiedź opisuje ramkę z linią kropkową (border-style: dotted) o grubości 2 px (border-width: 2px) oraz odstęp między tekstem a ramką 15 px, czyli padding."

Źródła:

  • MDN Web Docs: border-style (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/border-style (accessed 2026-02-18)
  • MDN Web Docs: padding (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/padding (accessed 2026-02-18)
  • MDN Web Docs: margin (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/margin (accessed 2026-02-18)

Materiały:

  • Dokumentacja MDN Web Docs: model pudełkowy CSS (box model)
  • Dokumentacja MDN Web Docs: border-style, border-width, margin, padding
  • Ćwiczenia praktyczne: stworzenie kilku akapitów z różnymi border-style i porównanie padding vs margin w przeglądarce (DevTools)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego