Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - CZERWIEC 2017



PYTANIE NR 7.
W języku CSS zdefiniowano styl. Sformatowana stylem sekcja będzie zawierała obramowanie o szerokości
Ilustracja przedstawia fragment kodu CSS, który definiuje styl dla elementu HTML typu 'div'.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
W CSS szerokość obramowania ustala właściwość border-width (np. 2 px). Margines (margin) zawsze znajduje się na zewnątrz obramowania i tworzy odstęp między elementami. Odstęp wewnątrz ramki to padding, a nie margin.

Pełne wyjaśnienie:

W CSS każdy element blokowy można opisać za pomocą tzw. modelu pudełkowego (box model). Składa się on z czterech warstw ułożonych od środka na zewnątrz:

  • content (treść, np. tekst/obraz),
  • wypełnienie wewnętrzne (padding) – odstęp między treścią a obramowaniem,
  • obramowanie (border) – "ramka" dookoła paddingu i treści,
  • margines (margin) – odstęp na zewnątrz obramowania, oddzielający element od innych.

Dlatego odpowiedź "2 px oraz marginesy na zewnątrz tego obramowania." jest zgodna z zasadami CSS: szerokość obramowania podaje się w pikselach (np. 2 px), a margines z definicji leży poza obramowaniem.

Pozostałe odpowiedzi odwołują się do typowych pomyłek:

  • "20 px oraz marginesy wewnątrz tego obramowania." – miesza dwie rzeczy naraz: inna wartość szerokości ramki oraz błędne umiejscowienie marginesu. Margines nie może być "wewnątrz" border.
  • "2 px oraz marginesy wewnątrz tego obramowania." – poprawna liczba dla border może kusić, ale sformułowanie o marginesach "wewnątrz" jest sprzeczne z definicją margin. Wewnętrzny odstęp realizuje padding.
  • "20 px oraz marginesy na zewnątrz tego obramowania." – prawidłowo wskazuje położenie marginesu, ale podaje inną szerokość obramowania niż wynikająca z definicji stylu (border-width).

Wskazówka egzaminacyjna: gdy w odpowiedziach pojawiają się "wewnątrz/na zewnątrz obramowania", skojarz to z box model: wewnątrz = padding, na zewnątrz = margin, a grubość "ramki" to border-width.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest model pudełkowy w CSS i z czego się składa?
Model pudełkowy (box model) opisuje, jak przeglądarka wyznacza rozmiar i odstępy elementu. Składa się z: content (treść), padding (odstęp wewnętrzny), border (obramowanie) oraz margin (odstęp zewnętrzny). To klucz do zrozumienia układu strony.
Jaka jest różnica między margin a padding w CSS?
margin tworzy odstęp na zewnątrz obramowania i separuje element od innych. padding tworzy odstęp wewnątrz obramowania, między treścią a ramką. W praktyce: margin "odsuwa elementy od siebie", a padding "odsuwa treść od ramki".
Czy margines w CSS może znajdować się wewnątrz obramowania?
Nie. Z definicji margin jest obszarem poza obramowaniem (border). Jeśli potrzebujesz odstępu wewnątrz ramki, użyj padding. To jedna z najczęstszych pułapek w zadaniach o box model.
Jak w CSS ustawić szerokość obramowania elementu?
Szerokość obramowania ustawia się właściwością border-width lub skrótem border. Przykład: border-width: 2px; albo border: 2px solid #000;. Sama szerokość bez stylu obramowania może nie dać widocznego efektu, jeśli styl jest domyślnie brak.
Dlaczego border-width i margin podaje się często w pikselach?
Piksele (px) dają przewidywalny, łatwy do porównania efekt wizualny, dlatego są częste w zadaniach egzaminacyjnych. W praktyce stosuje się też jednostki względne (np. rem, em) dla lepszej skalowalności. Niezależnie od jednostki, zasada położenia margin (na zewnątrz) i padding (wewnątrz) pozostaje taka sama.
Jak sprawdzić w przeglądarce, gdzie jest margin i padding elementu?
Użyj narzędzi deweloperskich (DevTools): zaznacz element i odszukaj panel box model. Zobaczysz warstwy: content, padding, border, margin z wartościami. To najlepszy sposób, aby szybko zweryfikować, skąd biorą się odstępy i czy wynikają z margin, padding czy border.
Co oznacza skrótowa deklaracja border w CSS?
border to właściwość skrótowa, która może ustawić jednocześnie: border-width, border-style i border-color. Np. zapis "border: 2px solid black" ustawia grubość na 2 px, typ linii jako ciągłą i kolor czarny. To częsty zapis w stylach.
Kiedy używa się margin zamiast padding w układzie strony?
margin stosuje się, gdy chcesz zwiększyć odstęp między elementami (np. między sekcjami, kartami, akapitami). padding używa się, gdy chcesz poprawić "oddech" treści wewnątrz komponentu (np. tekst w przycisku, zawartość karty), bez przesuwania innych elementów.
Jakie błędy najczęściej popełnia się w zadaniach o obramowanie i marginesy?
Najczęstsze błędy to: mylenie margin z padding, skupianie się tylko na liczbie (np. 2 px) bez rozróżnienia "wewnątrz/na zewnątrz", oraz pomijanie faktu, że border dotyczy ramki, a margin dotyczy przestrzeni wokół niej. Pomaga zapamiętać kolejność warstw box model.
Jak przygotować się do zadań CSS o box model na egzamin INF.3?
Przećwicz na prostych przykładach: ustaw margin, padding i border na elementach div i obserwuj efekt w DevTools. Ucz się słów-kluczy: "na zewnątrz obramowania" = margin, "wewnątrz obramowania" = padding. Rozwiązuj testy, gdzie te pojęcia są mieszane.
info

Statystycznie 62% uczniów zna prawidłową odpowiedź. średnie

Według specjalistów z branży: "W CSS szerokość obramowania ustala właściwość border-width (np. 2 px)."

Źródła:

  • MDN Web Docs: CSS Box Model ("The box model") https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model - accessed 2026-02-27
  • MDN Web Docs: CSS margin https://developer.mozilla.org/en-US/docs/Web/CSS/margin - accessed 2026-02-27
  • MDN Web Docs: CSS border-width https://developer.mozilla.org/en-US/docs/Web/CSS/border-width - accessed 2026-02-27

Materiały:

  • Dokumentacja MDN dotycząca modelu pudełkowego CSS (box model)
  • Dokumentacja MDN dotycząca właściwości margin i border-width
  • Ćwiczenia praktyczne z DevTools: podgląd box model i modyfikacja margin/padding/border na żywo
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego