W zadaniach tego typu kluczowe jest powiązanie struktury HTML z tym, jak przeglądarka oblicza i rysuje układ na podstawie reguł CSS. Bloki 2–5 są elementami potomnymi (lub znajdują się w określonej relacji w drzewie DOM), więc o ich położeniu decyduje m.in.:
- display (np. układ blokowy, układ elastyczny, siatka),
- position (statyczne, relatywne, absolutne) oraz ewentualne przesunięcia,
- float/clear (jeśli zastosowano opływanie),
- wymiary i odstępy (width/height oraz margin/padding),
- kolejność elementów w HTML i specyficzność selektorów.
Odpowiedź "Kod 2." jest poprawna, ponieważ to właśnie ten wariant stylów odpowiada układowi bloków 2–5 pokazanemu w zadaniu (w kontekście podanego HTML). W praktyce oznacza to, że zastosowane w nim właściwości układu i/lub reguły dla właściwych selektorów powodują dokładnie takie rozmieszczenie elementów, jakie jest wymagane.
Pozostałe propozycje są błędne, bo prowadzą do innego mechanizmu layoutu albo stylują niewłaściwe elementy. Typowe rozbieżności to:
- ustawienie układu w jednej kolumnie zamiast w wierszu/siatce,
- brak zawijania elementów i "rozjechanie" układu,
- pozycjonowanie wyrywające elementy z normalnego przepływu dokumentu,
- brak właściwości wyrównania/rozmieszczenia, przez co odstępy i położenie nie zgadzają się z układem docelowym.
Wskazówka egzaminacyjna: w pierwszej kolejności sprawdź, który element jest kontenerem dla bloków 2–5 i jakie ma reguły. Następnie zweryfikuj, czy reguły dotyczą właściwych selektorów (np. klasy/identyfikatory) i czy użyta technika (blokowa/flex/grid/float) rzeczywiście daje układ z ilustracji.
