Właściwość box-sizing

Właściwość box-sizing pozwala zmieniać sposób obliczania wymiarów elementu.

Domyślnie dodanie padding rozszerza element: jeśli ustawiliśmy szerokość width na 100px i padding-left na 20px, to rzeczywista szerokość elementu wyniesie 120px.

A jeśli ustawimy jeszcze border-left na 10px, to rzeczywista szerokość elementu stanie się 130px. Czyli padding i border rozszerzają blok (zarówno pod względem szerokości, jak i wysokości). To zachowanie można zmienić za pomocą box-sizing.

Składnia

cssselektor {
  box-sizing: content-box | border-box;
}

Wartości

Wartość domyślna: content-box.

Przykład . Zachowanie domyślne

Obecnie oba bloki mają tę samą wysokość i szerokość, jednak drugi blok ma ustawiony padding, a pierwszy nie. Zobacz, jak różnią się ich rozmiary:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Przykład . Zachowanie domyślne

Obecnie oba bloki mają tę samą wysokość i szerokość, jednak drugi blok ma ustawione obramowanie o szerokości 10px, a pierwszy nie. Zobacz, jak różnią się ich rozmiary:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Przykład . Zachowanie domyślne

Obecnie drugi blok ma zarówno padding, jak i obramowanie o szerokości 10px:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  border: 20px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Przykład . Wartość border-box

Dodajmy drugiemu elementowi wartość border-box dla właściwości box-sizing. Teraz wymiary zarówno pierwszego, jak i drugiego elementu staną się takie same:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  box-sizing: border-box;
  padding: 50px;
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Zobacz też