KWALIFIKACJA INF3 - WRZESIEŃ 2015

PYTANIE NR 4.
W języku CSS, w celu zdefiniowania wewnętrznego górnego marginesu, czyli odstępu między elementem a otaczającym go obramowaniem, należy użyć polecenia
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
padding-top ustawia wewnętrzny górny odstęp elementu, czyli przestrzeń między treścią a krawędzią obramowania (border).
Właściwości border-top i outline-top dotyczą rysowania krawędzi, a nie odstępu; local-top nie jest standardową właściwością CSS.

Pełne wyjaśnienie:

W modelu pudełkowym CSS element składa się (od środka) z: content, padding, border oraz margin. Jeśli pytanie dotyczy "wewnętrznego górnego marginesu" rozumianego jako odstęp wewnątrz elementu, między treścią a obramowaniem, to chodzi o padding, a dokładnie o jego górną część.

Poprawna odpowiedź: padding-top
Właściwość padding-top ustala wielkość górnego odstępu wewnętrznego. Zwiększenie tej wartości odsuwa treść elementu od jego górnej krawędzi obramowania, poprawiając czytelność i "oddech" komponentu.

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

  • outline-top – w standardowym CSS nie występuje jako poprawna właściwość. Outline dotyczy obrysu rysowanego wokół elementu, ale nie jest dzielony na "top/right/bottom/left" w ten sposób.
  • border-top – odnosi się do górnej krawędzi obramowania (np. jej szerokości, stylu, koloru), a nie do odstępu wewnętrznego. Border "zajmuje miejsce" jako krawędź, ale nie tworzy przestrzeni między treścią a krawędzią.
  • local-top – nie jest standardową właściwością CSS; może wyglądać wiarygodnie przez podobieństwo do innych nazw, ale nie służy do definiowania odstępów.

Wskazówka egzaminacyjna: jeśli w treści pojawia się "odstęp między treścią a obramowaniem", szukaj padding. Jeśli mowa o "odstępie na zewnątrz obramowania" – to będzie margin. Gdy pytanie dotyczy wyglądu krawędzi, wtedy właściwości zaczynają się od border- lub outline.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Padding to odstęp wewnętrzny elementu: przestrzeń między treścią (content) a obramowaniem (border). Zwiększa "oddech" wewnątrz elementu, np. w przyciskach i kartach. Ustawia się go właściwościami padding lub padding-top/right/bottom/left.
padding-top zwiększa lub zmniejsza odstęp nad treścią elementu, ale wciąż wewnątrz jego obramowania. Jeśli np. tekst "klei się" do górnej krawędzi ramki, dodanie padding-top poprawia czytelność. Nie przesuwa elementu względem innych elementów — to robi margin.
Padding to odstęp wewnątrz elementu (między content a border), a margin to odstęp na zewnątrz obramowania (między elementami). Na egzaminie najczęstsza pułapka to mylenie tych pojęć, bo oba "dodają przestrzeń", ale w innym miejscu.
border-top dotyczy samej górnej krawędzi obramowania (jej grubości, stylu, koloru), a nie przestrzeni między treścią a krawędzią. Border może sprawić wrażenie "większego elementu", ale nie jest tym samym co padding. Odstęp wewnętrzny zawsze realizuje rodzina właściwości padding.
Nie. Outline to obrys rysowany wokół elementu i zwykle nie wpływa na układ tak jak padding lub border. Do kontrolowania odległości obrysu od elementu służy osobna właściwość (outline-offset), ale to nadal nie jest odstęp między treścią a obramowaniem. To inny mechanizm niż padding.
Podstawowe warstwy to: content (treść), padding (odstęp wewnętrzny), border (obramowanie) i margin (odstęp zewnętrzny). W narzędziach deweloperskich przeglądarki często zobaczysz je jako schemat "box model", co ułatwia diagnozowanie layoutu.
padding-top stosuj, gdy chcesz odsunąć treść od górnej krawędzi wewnątrz tego samego elementu (np. w przycisku, polu formularza, karcie). margin-top stosuj, gdy chcesz zwiększyć odległość elementu od innych elementów powyżej, czyli zmienić odstęp na zewnątrz obramowania.
W narzędziach deweloperskich (DevTools) wybierz element i sprawdź zakładkę/sekcję "Box model". Zobaczysz tam wartości margin, border i padding osobno dla każdej strony. To szybki sposób, by potwierdzić, czy problem wynika z padding-top, czy np. z margin-top albo z właściwości border.
W standardowym CSS nie ma powszechnie używanej właściwości local-top do ustawiania odstępów lub obramowań. Na testach takie odpowiedzi często są "fałszywie wiarygodne", bo brzmią podobnie do prawdziwych nazw. Warto kojarzyć podstawowe rodziny: padding, margin, border, outline.
Najczęściej: (1) mylą padding z margin i wybierają właściwość z "-margin", bo kojarzą ją ze słowem "margines"; (2) wybierają border, bo w pytaniu pojawia się "obramowanie"; (3) ufają nieistniejącym nazwom, bo pasują wzorcem do CSS. Pomaga trzymanie się modelu pudełkowego.
info

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

W praktyce zawodowej kluczowe jest to, że padding-top ustawia wewnętrzny górny odstęp elementu, czyli przestrzeń między treścią a krawędzią obramowania (border).

Źródła:

  • MDN Web Docs: "padding-top" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top — accessed 2026-02-18
  • MDN Web Docs: "CSS box model" — https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model — accessed 2026-02-18
  • W3C Editor's Draft: "CSS Box Model Module Level 3" (padding properties) — https://drafts.csswg.org/css-box-3/ — accessed 2026-02-18

Materiały:

  • Dokumentacja MDN o modelu pudełkowym CSS
  • Dokumentacja MDN dla właściwości padding-top
  • Specyfikacja W3C CSS Box Model (padding properties)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego