CSS- Model pudełkowy

Pudełka w pudełkach

Model pudełkowy opisuje budowę elementów HTML. Każdy element składa się z kilku pudełek, a dokładniej czterech, które zawierają się w sobie. Tymi pudełkami są:

  • margin- margines
  • border- obramowanie
  • padding- wypełnienie/dopełnienie (margines wewnętrzny)
  • content- zawartość

model-pudelkowy

Prześledźmy to sobie na przykładzie.

Praktyka

Mamy prostą stronę HTML, która zawiera jednego diva:

Strona prezentuje się następując:

screencapture-file-C-Users-Tomasz-20Tomczykiewicz-Desktop-CSS-20dyrektywa-20important-html-1499193105924

Po włączeniu narzędzi deweloperskich w przeglądarce (w Chromie wciskamy F12
i przechodzimy do zakładki „Computed”) możemy dokładnie podejrzeć co się dzieje
w „środku”.

Przechwytywanie

Widzimy dokładnie cztery „pudełka” i jakie mają wielkości. Po najechaniu myszką na konkretne pudełko podświetli się nam ono w oknie przeglądarki.

Content

Jest to najbardziej wewnętrzne „pudełko”. Określa ono wielkość elementu bez żadnych „dodatków” takich jak marginesy czy krawędzie. Możemy ustalić rozmiary za pomocą atrybutów height oraz width.

Bez tytułu

Padding

Definiuje odległość elementu od krawędzi. Służy do otaczania zawartości pustą przestrzenią.

Bez tytułu

Możemy zdefiniować odległość konkretnie dla każdego kierunku lub dla każdego identyczną.

Border

Nakreśla grubość krawędzi, która jest pomiędzy marginesem oraz wypełnieniem.

Bez tytułu

Podobnie jak padding, możemy definiować szerokość dla każdej krawędzi, jak również dla wszystkich taką samą. Dodatkowo możemy określić kolor oraz styl krawędzi.

Przechwytywanie
Różne style, wielkości oraz kolory dla krawędzi.

Margin

Jest to odległość pomiędzy ramką, a innymi sąsiadującymi elementami.

Bez tytułu

Tak jak w przypadku dopełnienia oraz krawędzi, marginesy możemy definiować oddzielnie dla każdego z kierunków.

Warte jest podkreślenia, że marginesy mogą przyjmować wartości ujemne,
w przeciwieństwie do padding i border. Gdyby się zdarzyło, że jednak mają wartości ujemne, to zostanie to zignorowane przez przeglądarkę.

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

Connecting to %s