Przejdź do treści

Marginesy

Model pudełkowy

Ilustracja związku pomiędzy zawartością, marginesem wewnętrznym, obramowaniem i marginesami.

Źródło: Cascading Style Sheets, Level 2

Każdy element generuje w dokumencie prostokątny obszar zwany pudełkiem (ang. Box model). Pudełko składa się z:

  1. Zawartości - "Content" (np. test, obrazek itd.)
  2. Otaczających marginesów wewnętrznych - "Padding"
  3. Obramowania - "Border"
  4. Marginesów - "Margin"

Ostatnie trzy składniki są opcjonalne, tzn. mogą mieć wartość zero.

Obwód (zewnętrzny) każdego z czterech obszarów nazywamy krawędzią ("Edge"). Według CSS rozmiary elementu (własności width oraz height) odnoszą się do samej zawartości ("Content") i nie wpływają na pozostałe obszary modelu pudełkowego ("Box model"), które są tworzone na zewnątrz zawartości, ale wewnątrz pudełka. Natomiast tło elementu jest określone dla wszystkich z podanych powyżej obszarów z wyjątkiem marginesów zewnętrznych, które zawsze są przezroczyste ("Transparent"). Zapamiętanie tych krótkich zasad pozwoli Ci uniknąć w przyszłości nieoczekiwanych problemów z wyświetlaniem elementów strony.

UWAGA! W trybie Quirks interpretacja modelu pudełkowego różni się od przedstawionej powyżej i jest niezgodna z CSS 2.

Komentarze

Zobacz więcej komentarzy