Każdy element generuje w dokumencie prostokątny obszar zwany pudełkiem (ang. box model). Pudełko składa się z:
-
zawartości - content, zawartość może stanowić np. tekst, obrazek, inny element;
-
marginesów wewnętrznych (dopełnienia) - padding, otaczających zawartość, które przyjmują takie samo tło jakie zostało przypisane do elementu;
-
obramowania - border;
-
marginesów zewnętrznych - margin, które są przeźroczyste.
Ostatnie trzy składniki są opcjonalne, tzn. mogą mieć wartość zero. Obwód zewnętrzny każdego z czterech obszarów nazywamy krawędzią edge. Według CSS rozmiary elementu, a więc width oraz height, odnoszą się do samej zawartości content i nie wpływają na pozostałe obszary "pudełka", które są tworzone na zewnątrz zawartości, ale wewnątrz pudełka. Natomiast 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ą przeźroczyste. Zapamiętanie tych krótkich zasad pozwoli Ci uniknąć w przyszłości nieoczekiwanych problemów z wyświetlaniem elementów strony. Najczęstszym błędem jest założenie, że szerokość i wysokość obiektu, są liczone razem z marginesami wewnętrznymi i obramowaniem. Intuicyjnie tak właśnie powinno być, ale w CSS jest inaczej.
Ćwiczenie 3_2_5_1
Wykonaj stronę pokazującą pudełkowy model obiektu. Do wykonania zadania zastosuj następujący kod HTML:
<body>
<div class="pojemnik">
<div class="box_model">
Tekst, który tutaj jest napisany jest odsunięty od obramowania o wielkość marginesów wewnętrznych - padding.
</div>
</div>
</body>
Kod CSS w zewnętrznym arkuszu stylów:
div.pojemnik
{
display:block;
width:400px;
height:300px;
border:1px solid black;
background-color:silver;
}
div.pojemnik div.box_model
{
width:190px;
height:100px;
background-color:white;
border:20px solid red;
margin:20px;
padding:20px;
}
Tak powinna wyglądać wykonana strona:
-
Widzimy jeden element div z czerwonym obramowaniem umieszczony wewnątrz diva szarego.
-
Wewnętrzny div jest odsunięty od krawędzi diva zewnętrznego o wartość marginesu zewnętrznego margin.
-
Wewnętrzny div posiada czerwone obramowanie border.
-
Tekst jest odsunięty od czerwonej krawędzi o wartość padding.
-
Obszar tekstu wyznacza width oraz height diva wewnętrznego.
Łatwiej będzie zrozumieć i zapamiętać opisaną sytuację po obejrzeniu poniższego rysunku:
Dodatkowo, można różnicować wartości marginesów wewnętrznych oraz zewnętrznych:
-
padding-left, margin-left - margines lewy;
-
padding-right, margin-right - margines prawy;
-
padding-top, margin-top - margines górny;
-
padding-bottom, margin-bottom - margines dolny;
Należy również zwrócić uwagę, że zapis margin:0 auto; lub margin:auto; wyśrodkowują dany element w poziomie.
Praca domowa
Wykonaj ponownie ćwiczenie z zajęć, ustalając różne wartości marginesów (left, right, top, bottom).