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.