Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Marginesy i odstępy

Model pojemnika

Email Drukuj PDF

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

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V