Model pudełkowy CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Model pudełkowy CSS opisuje, z jakich warstw składa się każdy element HTML wyświetlany na stronie. Jest szczególnie ważny przy zadaniach dotyczących marginesów, obramowania i odstępów wewnętrznych.

Element w CSS można wyobrazić sobie jako prostokąt złożony z kilku części:

  • content - właściwa zawartość elementu, np. obrazek w elemencie img albo tekst w akapicie,
  • padding - margines wewnętrzny, czyli odstęp między zawartością a obramowaniem,
  • border - obramowanie elementu,
  • margin - margines zewnętrzny, czyli odstęp między elementem a innymi elementami.

Przykład

img {
  background-color: Teal;
  border: 4px solid black;
  padding: 50px;
  margin: 20px;
}

W tym przykładzie obrazek ma tło w kolorze Teal, które będzie widoczne głównie w obszarze padding, czyli wokół właściwej grafiki. Obramowanie ma grubość 4px, styl solid i kolor czarny. padding: 50px oznacza odstęp wewnętrzny po każdej stronie obrazka, a margin: 20px oznacza odstęp zewnętrzny od innych elementów.

Ważne na egzaminie

W zadaniach INF.03 często trzeba rozpoznać, czy podana wartość dotyczy padding, czy margin. Jeśli odstęp znajduje się wewnątrz obramowania, jest to padding. Jeśli odstęp znajduje się na zewnątrz obramowania, jest to margin.