Model pudełkowy

Model pudełkowy (ang. box model)- jest to schemat wg. którego zostaje ustalona wielkość elementu. Pojęcie to funkcjonuje w języku CSS.

Model standardowy

W trybie standardów przeglądarek internetowych model pudełkowy, w zgodzie ze standardem CSS 2, określa, że szerokość lub wysokość elementu ustalana przez polecenia CSS [[CSS/width]] i [[CSS/height]] odnosi się tylko do zawartości, a końcowy rozmiar (szerokość lub wysokość) będzie inny. Jest to znane jako content-sizing.

Przykładowo dla elementu o następujących stylach:

margin: 10px;
padding: 10px;
border: 10px;
width: 200px;

końcowa szerokość elementu będzie wynosić: 200px (width) + 10px * 2 (padding z dwóch stron) + 10px * 2 (margin z dwóch stron) + 10px * 2 (border z dwóch stron) co daje w sumie 260 pikseli.

Kontrowersje dotyczące modelu standardowego

Krytycy modelu standardowego zauważają, że intuicyjnie jako szerokość (lub wysokość) elementu nie jest przyjmowana szerokość jego zawartości. Długością pudełka zapałek nie jest długość zapałki, stąd standardowy model pudełkowy CSS jest nieintuicyjny i trudny do zrozumienia dla początkujących adeptów CSS.

Model pudełkowy w trybie dziwactw

W trybie [[CSS/Quirks Mode]] (tzw. trybie dziwactw) stosowany jest odmienny od standardowego model pudełkowy, bliższy natomiast pojęciu intuicyjnemu, gdzie parametry width i height określają rozmiary całego pudełka, włącznie z marginesami i obramowaniami, natomiast aby określić rozmiar zawartości elementu należy odjąć od szerokości pudełka jego margin, border i padding.

Zobacz też

* [[css/elementy_blokowe_i_liniowe]] * [[css/box-sizing]], [[css/padding]], [[css/margin]], [[css/border]] * [[css/quirks_mode]]