Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Właściwości marginesów i dopełnienia

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:

Model pudełkowy elementu
Rysunek 3_2_5_1. Model pudełkowy elementu

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


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.