Na obrazie przedstawiono efekt formatowania stylami CSS oraz kod HTML generujący ten przykład. Zakładając, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne wynoszą 20 px, styl CSS dla obrazu ma postać
Pytanie z egzaminu CKE, styczeń 2020 (arkusz EE.09-SG-20.01).
Na obrazie widać zdjęcie z szerokim turkusowym obszarem wokół grafiki i cienką czarną, ciągłą ramką. Tło background-color: Teal wypełnia także margines wewnętrzny, dlatego wokół ikony jest dużo turkusu. Ramka 4px solid black rysuje czarną linię ciągłą. Margines wewnętrzny, padding, to odstęp między zawartością a ramką, więc ma wynieść 50 px. Margines zewnętrzny, margin, to odstęp od ramki do sąsiednich elementów - 20 px. Poprawny styl ma więc padding: 50px i margin: 20px. Do zapamiętania: padding jest wewnątrz ramki i przyjmuje kolor tła elementu, margin jest na zewnątrz i zawsze jest przezroczysty.
Style różnią się dwoma szczegółami i oba trzeba sprawdzić. Pierwszy to rodzaj ramki: dotted rysuje linię kropkowaną, a w kolorze Teal zlałaby się z tłem - na ilustracji ramka jest czarna i ciągła, czyli solid black. Drugi to zamienione marginesy. W stylach, w których margin wynosi 50 px, a padding 20 px, wokół ikony zostałoby tylko 20 px tła, za to obraz odsunąłby się od nagłówka na 50 px. Treść zadania mówi o marginesach wewnętrznych 50 px, czyli padding: 50px, i zewnętrznych 20 px, czyli margin: 20px. Ten warunek spełnia tylko styl z ciągłą czarną ramką i takimi wartościami. Pomaga zapamiętanie, że padding leży wewnątrz ramki i przejmuje kolor tła, a margin leży na zewnątrz. W narzędziach deweloperskich przeglądarki oba marginesy widać na schemacie modelu pudełkowego.