Egenskaben box-sizing

Egenskaben box-sizing tillader at ændre metoden til beregning af et elements dimensioner.

Som standard tilføjer padding elementet: hvis vi har angivet en bredde width på 100px og padding-left på 20px, vil elementets faktiske bredde blive 120px.

Og hvis vi også angiver en border-left på 10px, vil elementets faktiske bredde blive 130px. Det vil sige, at padding og border udvider blokken (både i bredde og højde). Dette behavior kan ændres med box-sizing.

Syntaks

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

Værdier

Standardværdi: content-box.

Eksempel . Standard behavior

Begge blokke har samme højde og bredde, men den anden blok har padding angivet, mens den første ikke har. Se, hvordan deres størrelser adskiller sig:

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

Результат:

Eksempel . Standard behavior

Begge blokke har samme højde og bredde, men den anden blok har en kant på 10px, mens den første ikke har. Se, hvordan deres størrelser adskiller sig:

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

Результат:

Eksempel . Standard behavior

Nu har den anden blok både padding og en kant på 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;
}

Результат:

Eksempel . Værdien border-box

Lad os tilføje værdien border-box for egenskaben box-sizing til det andet element. Nu vil størrelserne på både det første og andet element blive de samme:

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

Результат:

Se også