W języku CSS, aby zdefiniować marginesy zewnętrzne o wartościach: margines górny i dolny 20 px, lewy i prawy 40 px należy użyć kodu

Poprawny zapis margin: 20px 40px; wynika z tzw. skróconej (shorthand) składni własności margin w CSS. Gdy podajemy dwie wartości, przeglądarka interpretuje je zawsze w ten sam sposób: pierwsza wartość dotyczy marginesu górnego i dolnego (top i bottom), a druga wartość dotyczy marginesu lewego i prawego (left i right). Czyli dokładnie tak, jak w treści pytania: 20 px góra/dół i 40 px lewo/prawo. To jest zgodne ze specyfikacją CSS (CSS Box Model) i działa we wszystkich współczesnych przeglądarkach. Moim zdaniem warto zapamiętać ogólny schemat dla margin i padding: – 1 wartość: wszystkie cztery strony jednakowe (margin: 20px;) – 2 wartości: góra/dół, lewo/prawo (margin: 20px 40px;) – 3 wartości: góra, lewo/prawo, dół (margin: 10px 20px 30px;) – 4 wartości: góra, prawo, dół, lewo – zgodnie z ruchem wskazówek zegara (margin: 10px 20px 30px 40px;) W praktyce zapis z dwiema wartościami jest bardzo często używany w layoutach responsywnych, np. przy centrowaniu kontenera: .container { margin: 20px auto; width: 80%; }. Zamiast podawać osobno margin-top, margin-right, margin-bottom i margin-left, używamy jednego, czytelnego skrótu. To nie tylko skraca kod, ale też ułatwia jego późniejsze utrzymanie. Dobrą praktyką jest też świadome korzystanie z jednostek. W przykładach szkolnych często pojawiają się piksele, ale w prawdziwych projektach produkcyjnych często stosuje się rem, em czy jednostki procentowe, żeby łatwiej skalować interfejs. Sama zasada działania shorthand margin pozostaje jednak identyczna, niezależnie od jednostki. Jeśli rozumiesz ten mechanizm, dużo łatwiej będzie Ci później ogarniać spacing w bardziej złożonych layoutach i frameworkach CSS, typu Bootstrap czy Tailwind, które bazują na tych samych regułach box modelu.