Właściwość padding w CSS opisuje marginesy wewnętrzne, czyli odstęp między treścią elementu a jego obramowaniem. Jest to element modelu pudełkowego (box model) i bezpośrednio wpływa na to, ile "powietrza" ma treść wewnątrz kontenera.
W notacji skróconej padding można podać od 1 do 4 wartości. Gdy podajesz 4 wartości, obowiązuje stała kolejność zgodna z ruchem wskazówek zegara, startując od góry:
top → right → bottom → left
Dlatego zapis padding: 50px 20px 40px 30px; oznacza dokładnie: góra 50px, prawo 20px, dół 40px, lewo 30px.
Ważny detal składni: wartości w deklaracji są rozdzielane spacjami. Użycie przecinków nie jest poprawnym separatorem w tej właściwości, więc reguła może nie zadziałać tak, jak oczekujesz (przeglądarka może ją pominąć jako niepoprawną).
Dlaczego pozostałe propozycje są błędne?
- padding: 50px 40px 20px 30px; miesza kolejność stron, więc "prawo" i "dół" nie odpowiadają wymaganym wartościom.
- padding: 20px 40px 30px 50px; zaczyna od 20px na górze, a w zadaniu góra ma mieć 50px, więc już pierwszy parametr się nie zgadza.
- padding: 40px 30px 50px 20px; przesuwa wartości na inne strony; dodatkowo łatwo tu o pomyłkę przez podobieństwo liczb.
W praktyce warto zapamiętać prostą regułę: TRBL (Top, Right, Bottom, Left). Na egzaminie zwróć uwagę na dwa typowe "haczyki": (1) kolejność clockwise, (2) spacje zamiast przecinków.
