Model pojemnika

Różne elementy na stronie - akapit, grafikę czy wykaz - możemy objąć prostokątem i potraktować całość jak pojemnik. Treść pojemnika to konkretny element, ale w prostokącie mamy jeszcze obramowanie (border), wewnętrzny odstęp (padding) i margines (margin). W specyfikacji CSS2 przedstawione jest pojęcie "box model", który dla naszych celów możemy spolszczyć jako "model pojemnika".


To jest akapit, w którym zdefiniowano kilka elementów pojemnika. To jest akapit, w którym zdefiniowano kilka elementów pojemnika. To jest akapit, w którym zdefiniowano kilka elementów pojemnika. To jest akapit, w którym zdefiniowano kilka elementów pojemnika.


W powyższym przykładzie zawartością pojemnika jest akapit. Obramowanie (border) to zielonkawa linia. Akapit jest oddzielony od obramowania odstępem (padding) o wielkości 1 cm. Między obramowaniem a innymi elementami na stronie znajduje się jeszcze margines o szerokości 1 cm. Dla wyraźniejszego zaprezentowania przykładu, poziome linie oddzielają akapit od reszty strony - margines jest zawarty właśnie między obramowaniem a poziomymi liniami i brzegami strony.

A teraz nieco inna definicja tego samego akapitu.


To jest akapit, w którym zdefiniowano kilka elementów pojemnika. To jest akapit, w którym zdefiniowano kilka elementów pojemnika. To jest akapit, w którym zdefiniowano kilka elementów pojemnika. To jest akapit, w którym zdefiniowano kilka elementów pojemnika.


W tym przykładzie margines (margin) został zmniejszony do 0,5 cm, obramowanie (border) jest czerwone, a odstęp (padding) został zwiększony do 1,5 cm.