Box Model

Model pudełkowy

Model pudełkowy (z ang. Box Model) - opisuje różne właściwości, 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ątych, które wyglądają jakby opakowywały poprzednie właściwości.

Kolejne fragmenty box modelu (od wewnątrz):

  • content (zawartość),
  • padding (odstępy wewnętrzne),
  • border (obramowanie),
  • margin (odstępy zewnętrzne),

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? Napisz na: codehubpl@gmail.com


© 2020 CodeHub.pl