1. Definicja modelu pudełkowego

    2. Model pudełkowy, każdy element w dokumencie HTML, otacza się prostokątnym obszarem zwanym pudełkiem (ang. Box model).

  2. Zawartość modelu pudełkowego

    3. Zawartość Opis
    zawartość (content) jest to zawartość bloku, w której może pojawić się tekst, obraz lub inne elementy HTML (np.: tekst, obrazek)
    margines wewnętrzny (padding) definiuje przestrzeń między zawartością a obramowaniem
    obramowanie (border) jest to zawartość bloku, w której może pojawić się tekst, obraz lub inne elementy HTML
    margines (margin) definiuje wolną przestrzeń za obramowaniem

  3. Uwagi na temat modelu pudełkowego

    4. 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. Model pudełkowy

  5. Różnice pomiędzy paddingiem i marginesem

    6. 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>.