1)Podaj definicję modelu pudełkowego

Każdy element w dokumencie HTML, otacza się prostokątnym obszarem zwanym pudełkiem (ang. Box model). Pudełko składa się z kilku warstw.

2)Wykonaj oraz uzupełnij tabelę:

zawartość Opis
Contentzawartość elementu (np.: tekst, obrazek)
Paddingotaczające marginesy wewnętrzne, odstęp między obramowaniem i zawartością elementu
Borderobramowania wokół zawartości elementu, ma styl i kolor.
Marginmarginesy wokół ramki (margines zewnętrzny). Jest to pusty obszar wokół ramki, który nie ma koloru tła i jest przeźroczysty.

3)Podaj dwie uwagi na temat modelu pudełkowego.

Uwaga 1:
Padding, border i margin mogą mieć zerową wartość.
Uwaga 2:
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).

4)Wstaw grafikę obrazującą model pudełkowy.

5)Wstaw grafikę obrazującą różnicę pomiędzy paddingiem i marginesem wraz z opisem


Padding określa przestrzeń wokół danego elementu, np: < p> lub < div>, natomiast margines przestrzeń pomiędzy elementami. Jak widać na rysunku, padding oznaczony jest kolorem niebieskim. Określa on wielkość przestrzeni wokół elementu < p>. Element ten posiada również margines zaznaczony kolorem pomarańczowym. Jest to odległość od brzegu elementu < body>.