Box Model

Model pudełkowy

Model pudełkowy (z ang. Box Model) - opisuje różne właściwości związane z wymiarami, które posiadają wszystkie elementy. Nazwa pochodzi od tego, że kolejne właściwości wpływają na poprzednie i prezentuje się to w postaci wpisanych w siebie prostokątów, które wyglądają jakby opakowywały poprzednie właściwości.

Kolejne fragmenty box modelu (od wewnątrz):

  • content - zawartość (właściwości width i height),
  • padding - odstępy wewnętrzne brzegów od treści,
  • border - obramowanie,
  • margin - odstępy zewnętrzne między elementami,

Box Model

Box model opisuje wspomniane wyżej właściwości w 4 kierunkach. Podgląd widoczny jest w narzędziach programistycznych po wybraniu elementu. Kolejność definiowania właściwości jest istotna: góra, prawo, dół, lewo dla czterech wartości, lub pion i poziom przy dwóch wartościach.

p {
    padding: 10px 25px; /* 10px góra i dół, 25px lewo i prawo */
}
p {
    padding: 10px 25px 15px; /* 10px góra, 15px dół, 25px lewo i prawo */
}
p {
    padding: 10px 15px 20px 25px; /* 10px góra, 15px prawo, 20px dół, 25px prawo */
}
p {
    padding: 10px; /* 10px z każdej strony */
}

Wymiary

Wymiary elementów są podawane w różny sposób w zależności od właściwości box-sizing . Domyślną wartością jest content-box a wymiary są liczone wyłącznie z zawartości. To znaczy, że dodatkowe właściwości jak np. padding nie zostaną uwzględnione w wysokości.

Można to zmienić ustawiając inną wartość właściwości box-sizing:

  • padding-box - wymiary obejmują zawartość i padding,
  • border-box - wymiary obejmują zawartość, padding oraz obramowanie,
school Mentoring

Masz pytania lub wątpliwości? Coś jest niejasne? Kliknij tutaj i skontaktuj się z mentorem.


Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dowiedz się więcej jak je wyłączyć. Ta strona jest chroniona przez reCAPTCHA i Google polityka prywatności Google i regulamin Google.

logo

Copyright © 2021 CodeHub.pl