CSS Box Sizing

CSS Box Sizing

CSS box-sizing egenskaben giver os mulighed for at inkludere indrykning (fyld) og kantlinje i elementets samlede bredde og højde.

Hvis CSS box-sizing egenskaben ikke specificeres

Standardmæssigt beregnes elementets bredde og højde således:

  • width + padding + border = elementets faktiske bredde
  • height + padding + border = elementets faktiske højde

Dette betyder: Når du indstiller elementets bredde/højde, ser elementet normalt større ud (fordi elementets kantlinje og indrykning allerede er blevet tilføjet til elementets specificerede bredde/højde).

Billedet nedenfor viser to <div>-elementer med samme specificerede bredde og højde:

Denne div er mindre
（bredden er 300px, højden 100px）.
Denne div er større
（bredden er også 300px, højden 100px）.

De to <div>-elementer vises med forskellige mål i det endelige resultat (fordi div2 har specificeret indrykning):

Eksempel

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Prøv det selv

box-sizing egenskaben løser dette problem.

Hvis du bruger CSS box-sizing egenskaben

box-sizing egenskaben giver os mulighed for at inkludere indrykning og kantlinje i elementets samlede bredde og højde.

Hvis der er indstillet box-sizing: border-box;Hvis du sætter bredden og højden, inkluderer bredden og højden således indrykning og kantlinje:

Nu er de to div's størrelser ens!
Hooray!

Dette eksempel er det samme som det forrige, de to <div>-elementer har begge indstillet box-sizing: border-box;：

Eksempel

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Prøv det selv

På grund af brug af box-sizing: border-box; på mange formelementer, at mange udviklere ønsker, at alle elementer på siden kan fungere på denne måde.

Følgende kode sikrer, at alle elementer justeres på denne mere intuitive måde. Mange browsere har allerede fået så gode resultater med at bruge box-sizing: border-box;（men ikke alle - dette er grunden til, at input og textarea ser forskellige ud, når width: 100%; anvendes）。

Det er sikkert og klogt at anvende dette på alle elementer:

Eksempel

* {
  box-sizing: border-box;
}

Prøv det selv

CSS Box Sizing egenskab

Egenskab Beskrivelse
box-sizing Definerer beregningsmetoden for elementets bredde og højde: om de skal inkludere indrykning (padding) og kant (border).