W języku CSS zdefiniowano styl:
div { border: dotted 3px red; padding: 15px; }Sekcja sformatowana tym stylem będzie miała obramowanie o szerokości
A. 3 px oraz marginesy wewnętrzne tego obramowania
B. 15 px oraz marginesy wewnętrzne tego obramowania
C. 3 px oraz marginesy zewnętrzne tego obramowania
D. 15 px oraz marginesy zewnętrzne tego obramowania
Poprawna odpowiedź to „3 px oraz marginesy wewnętrzne tego obramowania”. W zapisie CSS border: dotted 3px red; użyto skróconej właściwości border, w której podano kolejno styl linii, szerokość i kolor obramowania. Wartość 3px określa więc grubość obramowania elementu div. Osobna właściwość padding: 15px; nie zmienia szerokości obramowania, tylko ustawia odstęp wewnętrzny - przestrzeń między zawartością elementu a jego obramowaniem. Reguła do zapamiętania: border-width odpowiada za grubość ramki, padding za odstęp od środka, a margin za odstęp na zewnątrz elementu. W praktyce padding stosuje się do odsunięcia tekstu lub grafiki od ramki, aby treść nie przylegała do krawędzi.
W tym przykładzie łatwo pomylić grubość obramowania z odstępem ustawionym przez padding. Wartość „15 px oraz marginesy zewnętrzne tego obramowania” nie pasuje do kodu, ponieważ 15px pochodzi z właściwości padding, a nie z border; dodatkowo zewnętrzny odstęp byłby określany przez margin. Wartość „15 px oraz marginesy wewnętrzne tego obramowania” poprawnie kojarzy 15px z odstępem wewnętrznym, ale błędnie traktuje tę liczbę jako szerokość obramowania. Padding tworzy przestrzeń między zawartością div a ramką. Wartość „3 px oraz marginesy zewnętrzne tego obramowania” ma dobrą szerokość ramki, bo 3px znajduje się w deklaracji border: dotted 3px red;, jednak myli padding z marginesem zewnętrznym. Poprawna odpowiedź to „3 px oraz marginesy wewnętrzne tego obramowania”. Typowy błąd polega na odczytaniu wszystkich wartości w regule jako parametrów obramowania albo na utożsamieniu padding z margin. W CSS te właściwości opisują różne części modelu pudełkowego.