W CSS rozmiar elementu zależy od modelu pudełkowego. Domyślnie (gdy nie ustawiono box-sizing) obowiązuje model content-box.
W modelu content-box właściwości width i height opisują wyłącznie wymiary obszaru treści (content). Dopiero na zewnątrz treści "doklejane" są kolejne warstwy: padding (jeśli istnieje) oraz border. Jeszcze dalej znajduje się margin, który wpływa na odstępy względem innych elementów, ale nie jest częścią samego pudełka.
W analizowanym kodzie ustawiono m.in. width: 560px oraz border: 2px. Ponieważ brak deklaracji box-sizing: border-box, nie wolno interpretować szerokości 560 px jako szerokości całkowitej razem z obramowaniem. Oznacza to, że szerokość przeznaczona na treść wynosi dokładnie 560 px.
Dlaczego pozostałe odpowiedzi są błędne?
- 2 px to grubość obramowania z jednej strony, a nie szerokość treści.
- 600 px pochodzi od height: 600px, czyli dotyczy wysokości, nie szerokości.
- 640 px mogłoby wynikać z błędnego dodawania/odejmowania wartości lub mylenia wymiarów; nie wynika z podanego kodu i nie opisuje szerokości treści.
Wskazówka egzaminacyjna: zawsze najpierw sprawdź, czy w CSS występuje box-sizing: border-box. Jeśli nie, przyjmij content-box i traktuj width jako wymiar treści, a border/padding jako dodatki zwiększające wymiar całkowity.
