Box-dimensionering - CSS-tricks

Anonim

Den box-sizingegendom i CSS styr hur rutan modell hanteras för elementet det gäller.

.module ( box-sizing: border-box; )

Ett av de vanligaste sätten att använda det är att tillämpa det på alla element på sidan, inklusive pseudoelement:

*, *::before, *::after ( box-sizing: border-box; )

Detta kallas ofta ”universal box-dimensionering”, och det är ett bra sätt att arbeta! Den (bokstavliga) widthdu ställer in är den bredd du får, utan att behöva utföra mental matematik och hantera komplexiteten som kommer från bredder som kommer från flera egenskaper. Vi har till och med en medvetenhetsdag här.

Värden

  • content-box: standarden. Värdena för bredd och höjd gäller endast för elementets innehåll. Vaddering och kant läggs till på utsidan av lådan.
  • padding-box: Bredd- och höjdvärdena gäller för elementets innehåll och dess stoppning. Gränsen läggs till på utsidan av rutan. För närvarande stöder endast Firefox padding-boxvärdet.
  • border-box: Värdena för bredd och höjd gäller för innehåll, vaddering och kant.
  • inherit: ärver rutans storlek för det överordnade elementet.

Exempel

Denna exempelbild jämför standard content-box(överst) med border-box(nedre):

Den röda linjen mellan bilderna representerar elementens breddvärde. Observera att elementet med standard box-sizing: content-box;överstiger den deklarerade bredden när vaddering och kant läggs till på utsidan av innehållsrutan, medan elementet med box-sizing: border-box;tillämpad passar helt inom den deklarerade bredden.

Använda boxstorlek

Låt oss säga att du ställer in ett element på width: 100px; padding: 20px; border: 5px solid black;. Som standard är den resulterande rutan 150 pixlar bred. Det beror på att standardboxmodellen är content-box, som endast tillämpar ett elements deklarerade bredd på dess innehåll och placerar stoppningen och kanten utanför elementets låda. Detta ökar effektivt hur mycket utrymme elementet tar upp.

Om du byter box-sizingtill padding-boxtrycks stoppningen in i elementets låda. Sedan skulle lådan vara 110px bred, med 20px vaddering på insidan och 10px kant på utsidan. Om du vill placera stoppningen och kanten inuti lådan kan du använda border-box. Lådan skulle då vara 100 pixlar bred - 10 pixlar kant och 20 pixel stoppning skjuts båda in i elementets låda.

Demo

Se pennajämförelse av box-storlek värden av CSS-Tricks (@ css-tricks) på CodePen.

Relaterad

  • width
  • height
  • padding
  • border

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
Alla * † 3 * † 1 ‡ 7 * 8 * 2,1 * † Alla *

* padding-boxstöds inte

† äldre versioner kräver -webkitprefix (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozprefix krävs upp till version 28, utan prefix från och med 29.