W układzie blokowym HTML elementy (np. dwa <div>) domyślnie układają się jeden pod drugim. Gdy w CSS pojawia się deklaracja marginesu o wartości 20 px (np. margin-top: 20px dla drugiego elementu albo margin-bottom: 20px dla pierwszego), przeglądarka rysuje przerwę pomiędzy tymi blokami. Taka przerwa jest właśnie "oddaleniem" jednego bloku od drugiego o 20 px.
Stwierdzenie o "dolnym marginesie dla bloku B" jest zbyt szczegółowe: sam fakt, że widzimy odstęp, nie musi oznaczać, że chodzi akurat o margin-bottom bloku B. Zależnie od kodu odstęp może wynikać z marginesu górnego B, dolnego A, a czasem z mechanizmu margin collapsing (kolapsowanie marginesów) w pionie.
Interpretacja "blok A będzie przesunięty w lewo o 20 px" zwykle dotyczy sytuacji, gdy użyto właściwości wpływających na pozycję w poziomie (np. margin-left, left przy pozycjonowaniu) albo gdy zastosowano inny model układu. Sam odstęp między A i B w pionie nie oznacza przesunięcia A w lewo.
Odpowiedź o nachodzeniu bloków sugeruje użycie pozycjonowania (np. position: absolute) lub ujemnych marginesów. Przy typowym dodatnim marginesie 20 px i standardowym przepływie dokumentu elementy nie powinny na siebie zachodzić, tylko zachowują przewidziany odstęp.
- Wskazówka egzaminacyjna: zawsze rozróżniaj "odstęp między elementami" (margin) od "wypełnienia wewnątrz elementu" (padding) i od przesunięć wynikających z pozycjonowania.
- Praktyka: jeśli masz wątpliwość, w DevTools sprawdź model pudełkowy i podświetl obszar margin dla danego elementu.
