Model pudełkowy

Model pudełkowy to schemat, według którego określane są wielkości części składowych elementu HTML (znaczników). Składa się on z czterech elementów:

• Zawartość (content) – to zawartość elementu, czyli tekst, obrazy, kod itp.
• Margines wewnętrzny/dopełnienie (padding) – to przestrzeń między zawartością elementu a jego obramowaniem.
• Obramowanie (border) – to ramka wokół elementu.
• Margines zewnętrzny (margin) – to przestrzeń między elementem a innymi elementami na stronie.

Domyślny model pudełkowy

W domyślnym modelu pudełkowym szerokość i wysokość elementu określają jego całkowitą wielkość, wliczając w to margines wewnętrzny, obramowanie i margines zewnętrzny. Oznacza to, że jeśli dla elementu o szerokości 100px dodamy obramowanie o szerokości 5px, to jego rzeczywista szerokość wyniesie 110px.

Zmodyfikowany model pudełkowy

Możemy zmodyfikować domyślny model pudełkowy, korzystając z właściwości CSS box-sizing. Wartość content-box powoduje, że szerokość i wysokość elementu określają jedynie jego zawartość. Margines wewnętrzny, obramowanie i margines zewnętrzny są wtedy dodawane do całkowitej wielkości elementu. Wartość border-box powoduje, że szerokość i wysokość elementu określają jego całkowitą wielkość, wliczając w to margines wewnętrzny, obramowanie i margines zewnętrzny. 

Wyśrodkowanie elementu

div {
  width: 100px;
  margin: auto;
}

W tym przykładzie ustawiliśmy szerokość elementu na 100px. Następnie ustawiliśmy margines wewnętrzny o wartości auto. Oznacza to, że margines wewnętrzny zostanie ustawiony na taką wartość, aby element został wyśrodkowany poziomo.

Dodanie obramowania do elementu

div {
  width: 100px;
  border: 5px solid black;
}

W tym przykładzie ustawiliśmy szerokość elementu na 100px. Następnie ustawiliśmy obramowanie o szerokości 5px i kolorze czarnym.

Dodanie przestrzeni między elementami

div {
  width: 100px;
  margin-left: 10px;
}

div:nth-child(2) {
  margin-left: 0px;
}

W tym przykładzie ustawiliśmy szerokość pierwszego elementu na 100px i margines zewnętrzny po lewej stronie o szerokości 10px. Następnie ustawiliśmy margines zewnętrzny po lewej stronie drugiego elementu na 0px. Oznacza to, że między pierwszym i drugim elementem będzie zachowana przestrzeń o szerokości 10px.

Zmiana modelu pudełkowego

div {
  width: 100px;
  border: 5px solid black;
  box-sizing: content-box;
}

W tym przykładzie ustawiliśmy szerokość elementu na 100px, obramowanie o szerokości 5px i kolorze czarnym oraz model pudełkowy content-box. Oznacza to, że szerokość i wysokość elementu określają jedynie jego zawartość. Margines wewnętrzny, obramowanie i margines zewnętrzny są wtedy dodawane do całkowitej wielkości elementu. W tym przypadku element będzie miał rzeczywistą szerokość 100px, a margines wewnętrzny, obramowanie i margines zewnętrzny będą miały szerokość 5px.

div {
  width: 100px;
  border: 5px solid black;
  box-sizing: border-box;
}

W tym przykładzie ustawiliśmy szerokość elementu na 100px, obramowanie o szerokości 5px i kolorze czarnym oraz model pudełkowy border-box. Oznacza to, że szerokość i wysokość elementu określają jego całkowitą wielkość, wliczając w to margines wewnętrzny, obramowanie i margines zewnętrzny. W tym przypadku element będzie miał rzeczywistą szerokość 110px, a margines wewnętrzny i margines zewnętrzny będą miały szerokość 0px.

Zastosowanie modelu pudełkowego

Model pudełkowy jest istotnym zagadnieniem w projektowaniu stron internetowych. Pozwala on kontrolować wygląd i układ elementów na stronie. Dodatkowo, model pudełkowy jest wykorzystywany przez wiele bibliotek i frameworków CSS, takich jak Bootstrap czy Foundation.