1. Podaj definicję modelu pudełkowego.

    2. 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ę:

    3. Zawartość modelu pudełkowego:

    Zawartość Opis
    "content" zawartość elementu (np.: tekst, obrazek)
    "padding" otaczające marginesy wewnętrzne, odstęp między obramowaniem i zawartością elementu
    "border" obramowania wokół zawartości elementu, ma styl i kolor
    "margin" marginesy 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.

      4. Uwaga 1

    1. Padding, border i margin mogą mieć zerową wartość.

      2. Uwaga 2

    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. Model pudełkowy (box model) przedstawiony został na schemacie. model_pudełkowy

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

    6. Padding określa przestrzeń wokół danego elementu, np: <p> lub <div>, natomiast margines przestrzeń pomiędzy elementami. różnica
    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>.