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