Lastnost box-sizing

Lastnost box-sizing omogoča spreminjanje načina izračuna dimenzij elementa.

Privzeto dodajanje padding razširi element: če smo nastavili širino width 100px in padding-left na 20px, bo dejanska širina elementa 120px.

In če nastavimo še border-left na 10px, bo dejanska širina elementa 130px. To pomeni, da padding in border razširjata blok (tako po širini kot po višini). To vedenje je mogoče spremeniti z box-sizing.

Sintaksa

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

Vrednosti

Privzeta vrednost: content-box.

Primer . Standardno vedenje

Trenutno imata oba bloka enako višino in širino, vendar ima drugi blok nastavljen padding, prvi pa ne. Oglejte si, kako se razlikujejo njihove velikosti:

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;
}

Результат:

Primer . Standardno vedenje

Trenutno imata oba bloka enako višino in širino, vendar ima drugi blok nastavljeno obrobo 10px, prvi pa ne. Oglejte si, kako se razlikujejo njihove velikosti:

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;
}

Результат:

Primer . Standardno vedenje

Trenutno ima drugi blok tako padding kot obrobo 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;
}

Результат:

Primer . Vrednost border-box

Dodajmo drugemu elementu vrednost border-box za lastnost box-sizing. Zdaj bodo velikosti tako prvega kot drugega elementa enake:

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;
}

Результат:

Glejte tudi