CSS Box Sizing

CSS Box Sizing

CSS box-sizing Egenskapen tillåter oss att inkludera margen (fyllning) och kantlinjen i det totala bredden och höjden på elementet.

Om CSS box-sizing egenskapen inte specificeras

Som standard beräknas elementets bredd och höjd på detta sätt:

  • width + padding + border = elementets faktiska bredd
  • height + padding + border = elementets faktiska höjd

Detta innebär: När du ställer in bredden / höjden på ett element, ser elementet vanligtvis större ut än du har specificerat (eftersom elementets kantlinje och margen har lagts till till det specificerade bredden / höjden).

Nästa bild visar två <div>-element med samma specificerade bredd och höjd:

Denna div är mindre
（bredd 300px, höjd 100px）.
Denna div är större
（bredden är också 300px, höjden 100px）.

De två <div>-elementen i de slutliga resultaten visar olika mått (eftersom div2 har specificerat margen):

Exempel

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

Prova själv

box-sizing Egenskapen löser detta problem.

Om man använder CSS box-sizing egenskapen

box-sizing Egenskapen tillåter oss att inkludera margen och kantlinjen i det totala bredden och höjden på elementet.

Om ett element har ställts in box-sizing: border-box;Om bredden och höjden inkluderar margen och kantlinjen:

Nu är storleken på de två divarna samma!
Hooray!

Detta exempel är lika med föregående exempel, båda <div>-elementen har ställts in box-sizing: border-box;：

Exempel

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

Prova själv

På grund av användning box-sizing: border-box; effekten så bra att många utvecklare vill att alla element på sidan ska fungera på detta sätt.

Följande kod säkerställer att alla element kan justeras på detta mer intuitiva sätt. Många webbläsare har redan använt box-sizing: border-box;（men inte alla - det är därför input och textarea ser annorlunda ut när width: 100%; används）.

Det är säkert och klokt att tillämpa detta på alla element:

Exempel

* {
  box-sizing: border-box;
}

Prova själv

CSS Box Sizing egenskap

Egenskap Beskrivning
box-sizing Definiera beräkningssättet för elementets bredd och höjd: om de ska inkludera inre marginaler (padding) och kanter.