Boksstørrelse - CSS-tricks

Anonim

Den box-sizingejendom i CSS styrer hvordan boksmodellen håndteres for elementet det gælder for.

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

En af de mere almindelige måder at bruge den på er at anvende den på alle elementer på siden, inklusive pseudo-elementer:

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

Dette kaldes ofte ”universal box-dimensionering”, og det er en god måde at arbejde på! Den (bogstavelige) widthdu indstiller er den bredde, du får, uden at skulle udføre mental matematik og styre den kompleksitet, der kommer fra bredder, der kommer fra flere egenskaber. Vi har endda en boksstørrelsesdag om dagen.

Værdier

  • content-box: standard. Værdier for bredde og højde gælder kun for elementets indhold. Polstringen og kanten føjes til ydersiden af ​​kassen.
  • padding-box: Bredde- og højdeværdier gælder for elementets indhold og dets polstring. Grænsen føjes til ydersiden af ​​feltet. I øjeblikket understøtter kun Firefox padding-boxværdien.
  • border-box: Bredde- og højdeværdier gælder for indholdet, polstring og kant.
  • inherit: arver størrelsen på det overordnede element.

Eksempel

Dette eksempelbillede sammenligner standard content-box(øverst) med border-box(nederst):

Den røde linje mellem billederne repræsenterer elementernes breddeværdi. Bemærk, at elementet med standard box-sizing: content-box;overstiger den deklarerede bredde, når polstring og kant føjes til ydersiden af ​​indholdsfeltet, mens elementet med box-sizing: border-box;anvendt passer helt inden for den deklarerede bredde.

Brug af boksstørrelse

Lad os sige, at du indstiller et element til width: 100px; padding: 20px; border: 5px solid black;. Som standard er den resulterende boks 150 px bred. Det skyldes, at standardboksstørrelsesmodellen er content-box, som kun anvender et elements deklarerede bredde på dets indhold og placerer polstring og kant uden for elementets boks. Dette øger effektivt, hvor meget plads elementet optager.

Hvis du ændrer box-sizingtil padding-box, skubbes polstringen inde i elementets kasse. Derefter ville kassen være 110 px bred med 20 pixel polstring på indersiden og 10 px kant på ydersiden. Hvis du vil sætte polstring og rammen inde i kassen, kan du bruge border-box. Kassen ville derefter være 100 px bred - 10 pixel kant og 20 pix polstring skubbes begge inde i elementets kasse.

Demo

Se pennesammenligning af værdier for boksstørrelse med CSS-Tricks (@ css-tricks) på CodePen.

Relaterede

  • width
  • height
  • padding
  • border

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Nogen *† 3 * † 1 ‡ 7 * 8 * 2,1 * † Nogen *

* padding-boxunderstøttes ikke

† ældre versioner kræver -webkitpræfiks (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozpræfiks kræves op til version 28, uprefixet pr. 29.