Aby ustawić marginesy wewnętrzne elementu: górny 50px, prawy 20px, dolny 40px, lewy 30px, należy użyć deklaracji CSS:
Źle. Przy 4 wartościach kolejność to góra-prawo-dół-lewo; tu zamieniono prawy z dolnym.
Źle. Tu góra=30, a miało być 50; kolejność niezgodna.
Źle. Zła kolejność wartości - nie odpowiada zadanym marginesom.
Dobrze. Kolejność góra(50) - prawo(20) - dół(40) - lewo(30).
Deklaracja padding: 50px 20px 40px 30px; jest poprawna, ponieważ skrócony zapis właściwości padding w CSS przy czterech wartościach działa zawsze w kolejności zgodnej z ruchem wskazówek zegara: góra, prawa strona, dół, lewa strona. Czyli pierwsza wartość 50px ustawia padding-top, druga 20px ustawia padding-right, trzecia 40px ustawia padding-bottom, a czwarta 30px ustawia padding-left. To jest standardowy mechanizm modelu pudełkowego CSS, opisywany m.in. w dokumentacji CSS Box Model i na MDN. Moim zdaniem warto to zapamiętać jako zasadę zegara, bo bardzo często pojawia się też przy margin. W praktyce taki zapis przydaje się np. przy tworzeniu przycisków, kart produktów, sekcji formularza albo banerów, gdzie potrzebujemy różnej ilości wolnego miejsca wewnątrz elementu. Padding zwiększa przestrzeń między zawartością elementu a jego obramowaniem, więc wpływa na wygląd i czasem też na rozmiar pudełka, zależnie od box-sizing. Dobrą praktyką jest używanie zapisu skróconego wtedy, gdy wartości są czytelne i świadomie ustawione, a nie przypadkowo przepisane. W większych projektach poprawna kolejność wartości bardzo pomaga utrzymać spójny layout i uniknąć dziwnych przesunięć w interfejsie.
W tym pytaniu najważniejsze jest zrozumienie kolejności wartości w skróconej właściwości padding. W CSS, gdy podajemy cztery wartości, przeglądarka nie interpretuje ich jako dowolnej listy ani nie dopasowuje ich według osi poziomej i pionowej na wyczucie. Obowiązuje konkretna kolejność: góra, prawa, dół, lewa. Najłatwiej skojarzyć to z ruchem wskazówek zegara, startując od góry elementu. Dlatego prawidłowy zapis musi mieć 50px jako pierwszą wartość, 20px jako drugą, 40px jako trzecią i 30px jako czwartą. Częsty błąd polega na pomyleniu prawej strony z dołem, czyli potraktowaniu zapisu jakby działał w kolejności góra, dół, prawa, lewa. Wtedy element wizualnie dostanie za dużo lub za mało miejsca po niewłaściwej stronie, co w praktyce może rozwalić układ strony, szczególnie w menu, kartach albo formularzach. Inny typowy problem to myślenie, że CSS zaczyna od lewej strony, bo tak czytamy tekst. Niestety, shorthand dla padding i margin działa inaczej: startuje od góry, potem idzie w prawo, dół i lewo. Z mojego doświadczenia najlepiej zapamiętać sobie prostą regułę TRBL: top, right, bottom, left. Jeżeli wartości są pomieszane, np. 20px trafia na górę albo 50px na lewą stronę, to deklaracja składniowo nadal jest poprawna, ale semantycznie robi coś innego niż wymaga zadanie. CSS nie zgłosi błędu, tylko zastosuje te wartości zgodnie ze swoją specyfikacją, a efekt na stronie będzie po prostu nie taki, jak chcieliśmy.