A box-sizing tulajdonság

A box-sizing tulajdonság lehetővé teszi az elem méreteinek számítási módjának megváltoztatását.

Alapértelmezetten a padding hozzáadása kiterjeszti az elemet: ha beállítottuk a szélességet width 100px értékre és a padding-left értékét 20px értékre, akkor az elem valódi szélessége 120px lesz.

És ha beállítjuk a border-left értékét is 10px értékre, akkor az elem valódi szélessége 130px lesz. Vagyis a padding és a border kiterjeszti a blokkot (mind szélességben, mind magasságban). Ezt a viselkedést megváltoztathatjuk a box-sizing segítségével.

Szintaxis

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

Értékek

Alapértelmezett érték: content-box.

Példa . Alapértelmezett viselkedés

Jelenleg mindkét blokknak azonos a magassága és szélessége, azonban a második blokknak padding van beállítva, az elsőnek pedig - nincs. Nézze meg, mennyire különböznek a méreteik:

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

Результат:

Példa . Alapértelmezett viselkedés

Jelenleg mindkét blokknak azonos a magassága és szélessége, azonban a második blokknak van egy 10px széles szegély beállítva, az elsőnek pedig - nincs. Nézze meg, mennyire különböznek a méreteik:

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

Результат:

Példa . Alapértelmezett viselkedés

Jelenleg a második blokknak van padding-je és 10px széles szegélye is:

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

Результат:

Példa . A border-box érték

Adjuk hozzá a második elemhez a border-box értéket a box-sizing tulajdonsághoz. Mostantól a méretek az első és a második elemnél is azonosak lesznek:

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

Результат:

Lásd még