Marginesy i odstępy

Model pojemnika

poniedziałek, 11 styczeń 2010 03:25 Administrator
Drukuj

Tematy: model pojemnika | margines cząstkowy | margines mieszany | odstęp cząstkowy | odstęp mieszany

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).

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.

To jest treść przykładowego akapitu, który ma kropkowane obramowanie i dolny margines o wielkości 50 pikseli, dzięki czemu następny akapit zostanie od niego odsunięty.

To jest drugi akapit, który też ma kropkowane obramowanie, ale również wewnętrzny odstęp o wielkości 50 pikseli, który oddziela treść akapitu od obramowania.