Chcąc zdefiniować marginesy wewnętrzne dla danych: margines górny 50px, dolny 40px, prawy 20px i lewy 30px, należy użyć składni CSS
A. padding: 40px 30px 50px 20px;
B. padding: 20px 40px 30px 50px;
C. padding: 50px 40px 20px 30px;
D. padding: 50px 20px 40px 30px;
Opracowane na podstawie zadania CKE, styczeń 2018 (arkusz E.14-X-18.01): W arkuszu wartości padding rozdzielono przecinkami. W CSS rozdziela się je spacjami - zapis z przecinkami jest nieprawidłowy i przeglądarka go pomija.
Składnia padding: 50px 20px 40px 30px; jest właściwa, bo w CSS skrócony zapis padding z czterema wartościami działa w kolejności zgodnej z ruchem wskazówek zegara: góra, prawa strona, dół, lewa strona. Czyli tutaj 50px ustawia margines wewnętrzny od góry, 20px od prawej, 40px od dołu, a 30px od lewej. To jest dokładnie taki układ, jakiego wymaga treść zadania. W praktyce ten zapis stosuje się bardzo często przy projektowaniu pudełek, przycisków, kart produktów, formularzy albo sekcji strony, gdzie odstęp między zawartością elementu a jego obramowaniem ma być różny z każdej strony. Moim zdaniem warto zapamiętać zasadę TRBL, czyli top, right, bottom, left, bo pojawia się nie tylko przy padding, ale też przy margin. To jest standardowe zachowanie CSS opisane w specyfikacji modelu pudełkowego, więc przeglądarki interpretują taki zapis jednolicie. Dobra praktyka jest taka, żeby skróconego zapisu używać wtedy, gdy poprawia czytelność kodu. Jeśli układ robi się mniej oczywisty, można też zapisać osobno padding-top: 50px;, padding-right: 20px;, padding-bottom: 40px; i padding-left: 30px;. Jednak w normalnej pracy frontendowej skrót jest wygodny i oszczędza miejsce w arkuszu stylów.
W tym pytaniu łatwo się pomylić, bo wartości przy właściwości padding wyglądają jak zwykła lista liczb, a CSS ma tutaj bardzo konkretną regułę odczytywania. Przy czterech wartościach kolejność nie jest dowolna i nie oznacza na przykład góra, dół, prawa, lewa ani prawa, dół, lewa, góra. Przeglądarka zawsze czyta taki zapis zgodnie z ruchem wskazówek zegara: najpierw góra, potem prawa strona, następnie dół i na końcu lewa strona. Dlatego jeśli po 50px pojawia się 40px, to ta druga wartość nie trafi na dół, tylko na prawą stronę elementu. To właśnie częsty błąd myślowy: ktoś bierze dane z treści zadania w podanej kolejności i przepisuje je po prostu do deklaracji CSS, bez dopasowania do składni języka. Inna pomyłka polega na tym, że ktoś zaczyna od prawej albo od dołu, jakby zapis był zależny od kierunku czytania strony. Tak nie jest. W CSS skróty typu padding i margin mają ustalony schemat, niezależny od języka strony czy układu tekstu. Z mojego doświadczenia najlepiej zapamiętać to jak obieg po pudełku: startujesz u góry, idziesz w prawo, schodzisz na dół i kończysz po lewej. Jeśli więc potrzebujesz góra 50px, prawa 20px, dół 40px, lewa 30px, poprawny zapis musi mieć dokładnie taki układ wartości: padding: 50px 20px 40px 30px;. Pozostałe kombinacje przestawiają odstępy, co w praktyce może zepsuć wygląd przycisku, sekcji lub całego layoutu, mimo że kod składniowo nadal będzie poprawny.