Model pojemnika

W specyfikacji kaskadowych arkuszy stylów występuje tzw. model pojemnika, zwanego czasem potocznie pudełkiem (ang. box model), który ilustruje, jakie są fizyczne, wizualne elementy danego elementu, oraz jakie jest położenie danego elementu, np. akapitu, śródtytułu czy ilustracji w stosunku do innych elementów.

Poniższa ilustracja pokazuje, jak rozumieć model pojemnika (czyli marginesu, obramowania, odstępu i zawartości elementu).

• W kolorze żółtym jest pokazany zewnętrzny margines, który oddziela dany element od innych elementów, np. akapit od akapitu. Zauważ od razu, że to właśnie zewnętrzne marginesy należy stosować do odsuwania od siebie elementów w pionie, a nie znacznik przełamania akapitu <br>, jak czyniono kiedyś, we wczesnym okresie rozwoju WWW.
• W kolorze brązowym jest pokazane hipotetyczne obramowanie elementu - gdybyśmy jawnie wstawili obramowanie, to znajdowałoby się ono właśnie między zewnętrznym marginesem a wewnętrznym odstępem.
• W kolorze zielonym pokazany jest wewnętrzny odstęp, czyli przestrzeń między hipotetycznym obramowaniem a właściwą treścią elementu.
• Na czerwonym tle jest pokazana właściwa treść elementu, np. zwykły akapit.

margines zewnętrzny (margin) oddziela dany element od innych elementów, np. akapit od akapitu, czy grafikę od śródtytułu odstęp wewnętrzny (padding) oddziela zawartość od hipotetycznego obramowania elementu (border) - tutaj brązowego właściwa zawartość elementu, np. akapit, śródtytuł, lista numerowana

Poniższy przykład pokazuje, jak wyglądają dwa kolejne akapity, w których zastosowano obramowanie, zewnętrzny margines i wewnętrzny odstęp. Widać tu wyraźnie, na czym polega model pojemnika. Oba kolejne pojemniki przylegają oczywiście do siebie, ale elementy są odsunięte.