Kluczowym pojęciem przy tworzeniu układu strony jest pojęcie pudełka omówione szczegółowo w rozdziale 8 specyfikacji CSS zatytułowanym „Box model” . Pudełko to prostokąt zajmowany przez element HTML. Każdy element HTML użyty w kodzie strony poza elementami nagłówka posiada swoje pudełko. Przykładami są nie tylko sekcje div, ale również akapity p, elementy strong, em, tabelki, ich wiersze i komórki czy listy wypunktowane.
Wysokość i szerokość pudełka jest ustalana przez przeglądarkę na podstawie stylu oraz zawartości elementu. Pudełko składa się z następujących czterech obszarów: zawartości, wyrównania (ang. padding), obramowania (ang. border) oraz marginesu. Rysunek 4 przedstawia pudełko z napisem ALA.
Rysunek 4. Poszczególne obszary pudełka i ich wpływ na szerokość całego elementu
Poszczególne obszary zostały na rysunku oznaczone: M - margines, B - obramowanie, P - wyrównanie oraz Z - zawartość. Margines, obramowanie i wyrównanie otaczają zawartość z czterech stron nazywanych top (góra), bottom (dół), left (lewa) oraz right (prawa). Atrybuty te możemy stosować do wszystkich czterech krawędzi na raz pisząc:
...brak dostępu...
oraz do każdej krawędzi z osobna stosując przyrostki -top, -bottom, -left oraz -right, na przykład:
...brak dostępu...
Szerokość całego elementu wynika z szerokości poszczególnych obszarów i jest równa ich sumie:
...brak dostępu...
lub, w przypadku elementów symetrycznych w pionie:
...brak dostępu...
Warto zapamiętać, że szerokość elementu ustalana atrybutem width określa wyłącznie szerokość przeznaczoną na treść. W celu wyliczenia szerokości zajmowanej przez cały element należy do podanej wartości dodać marginesy, obramowanie i wyrównanie.
Jeśli chcemy otrzymać pudełko o szerokości 100 pikseli i posiadające jednopikselowe obramowanie wówczas podajemy marginesy równe 0, obramowanie równe 1, wyrównanie równe 0 oraz zawartość równą 98, według wzoru:
...brak dostępu...
Style mają postać:
...brak dostępu...
Jeśli zechcemy, by cały element miał 150 pikseli szerokości, był otoczony 5-cio pikselowym marginesem, posiadał trzypikselowe obramowanie, zaś jego zawartość była odsunięta od krawędzi o 10 pikseli to należy użyć stylów:
...brak dostępu...
gdyż
...brak dostępu...
Po umieszczeniu powyższej sekcji wewnątrz sekcji o identyfikatorze duza o szerokości 160 pikseli (150 na zawartość, 10 na obramowanie):
...brak dostępu...
i nadaniu odmiennego tła, możemy dokładnie zmierzyć rozmiary wszystkich elementów układu, stosując wcześniej opisane metody. Szerokość i obramowanie sekcji nadrzędnej definiujemy następująco:
...brak dostępu...
W celu uniknięcia zamieszania, najlepiej w pliku CSS uporządkować kolejność wpisów dotyczących poszczególnych selektorów. Dobrą metodą jest umieszczanie atrybutów dotyczących pudełka przed wszelkimi innymi wpisami (np. kolorami lub czcionkami). Dodatkowo, atrybuty pudełka umieszczamy w kolejności:
...brak dostępu...
(czyli w kolejności od najbardziej zewnętrznych do najbardziej wewnętrznych), po nich umieszczamy dodatkowe atrybuty dotyczące pudełka takie jak float czy clear, a na końcu czcionki, kolory czy wyrównanie. Dodatkowo, atrybuty z przyrostkami (np. left) piszemy w kolejności -top, -right, -bottom i -left:
...brak dostępu...
Pamiętajmy, że włączenie widoczności krawędzi elementu zwiększa jego rozmiar o podwójną grubość obramowania. Jeśli na stronie mamy element div o szerokość 100 pikseli:
...brak dostępu...
i w celu sprawdzenia jego położenia wyświetlimy krawędzie:
...brak dostępu...
to element ten ma teraz szerokość 102 piksele. Może to mieć wpływ na inne elementy znajdujące się na stronie!
Znacznie lepiej jest zmodyfikować tło elementu:
...brak dostępu...
gdyż taka zmiana nie wpływa na jego rozmiar.
