Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Problem z tym pytaniem wynika głównie z mylenia kolejności wartości w skróconej notacji margin oraz z intuicyjnego założenia, że pierwsza liczba odnosi się do lewej strony, a druga do prawej. W CSS skrócone zapisy mają bardzo konkretną i stałą semantykę, którą warto sobie poukładać raz, a porządnie. Dwie wartości w margin nie oznaczają lewo/prawo i góra/dół, tylko zawsze: pierwsza – góra i dół, druga – lewo i prawo. Jeśli ktoś wybiera margin: 40px 20px;, to w praktyce ustawia 40px na górze i na dole oraz 20px po lewej i po prawej. To jest dokładne przeciwieństwo tego, co było wymagane w treści pytania. Taki błąd często wynika z myślenia „poziomo”: najpierw lewo-prawo, potem góra-dół, a CSS idzie inną logiką. Kolejne nieporozumienie dotyczy zapisów z czterema wartościami. Wiele osób ma problem z zapamiętaniem kolejności. Standard CSS definiuje to jasno: gdy podajemy cztery liczby, interpretacja idzie zgodnie z ruchem wskazówek zegara, zaczynając od góry: top, right, bottom, left. Czyli margin: 20px 20px 40px 40px; oznacza: góra 20px, prawo 20px, dół 40px, lewo 40px. W pytaniu chcemy: góra 20px, dół 20px, lewo 40px, prawo 40px, więc ten zapis nie spełnia warunku, bo wartości dla prawej strony są inne niż dla lewej, a górna różni się od dolnej. Podobnie margin: 20px 40px 40px 20px; rozwija się do: 20px na górze, 40px po prawej, 40px na dole, 20px po lewej. Tutaj symetria jest odwrotna: góra i lewo mają 20px, a dół i prawo 40px. Z mojego doświadczenia typowy błąd polega na tym, że ktoś próbuje „na czuja” dopasować liczby, zamiast trzymać się sztywnej reguły: 2 wartości – góra/dół oraz lewo/prawo, 4 wartości – góra, prawo, dół, lewo. W efekcie kod może nawet wyglądać sensownie na pierwszy rzut oka, ale przeglądarka zinterpretuje go zupełnie inaczej, niż autor zakładał. Dlatego warto myśleć o margin w kontekście box modelu i specyfikacji, a nie tylko wizualnie. Dobra praktyka jest taka, żeby przy bardziej skomplikowanych odstępach na początku rozpisywać margin-top, margin-right, margin-bottom, margin-left osobno, a dopiero potem, gdy mamy pewność, zamieniać to na skróconą notację. To ogranicza liczbę takich subtelnych, ale uciążliwych pomyłek w layoutach.