Model pudełkowy CSS
Jakie są zasady obliczania faktycznych rozmiarów elementów na stronach WWW? Jakie są najczęstsze pułapki?
Ź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:
- Zawartości - "Content" (np. test, obrazek itd.)
- Otaczających marginesów wewnętrznych - "Padding"
- Obramowania - "Border"
- 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.
Pytania i odpowiedzi
Co to jest model pudełkowy?
Model pudełkowy (box model) to koncept w kontekście Kaskadowych Arkuszy Stylów (CSS), w którym każdy element na stronie jest traktowany jako "pudełko" składające się z treści, marginesów, paddingu i obramowania. Właściwości CSS, takie jak width, height, margin, padding oraz border, wpływają na wymiary i układ tych pudełek, co pozwala na precyzyjne pozycjonowanie i stylizację elementów na stronie.
Co to jest model blokowy?
Model blokowy odnosi się do sposobu wyświetlania elementów w HTML i CSS, gdzie elementy blokowe (np. <div>, <p>) zajmują całą dostępną szerokość oraz tworzą nową linię powyżej i poniżej nich. W przeciwieństwie do elementów liniowych, elementy blokowe można stylizować przy użyciu właściwości CSS, takich jak szerokość, marginesy czy obramowanie. Przykładowy kod: <div style="width: 300px; margin: 10px; background-color: blue">Treść</div>.