Boksstørrelse - CSS-triks

Anonim

Den box-sizingeiendom i CSS kontrollerer hvordan boksen modellen er håndtert for elementet det gjelder.

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

En av de vanligste måtene å bruke den på er å bruke den på alle elementene på siden, inkludert pseudoelementer:

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

Dette kalles ofte ”universal boksstørrelse”, og det er en god måte å jobbe på! Den (bokstavelige) widthdu angir er bredden du får, uten å måtte utføre mental matematikk og håndtere kompleksiteten som kommer fra bredder som kommer fra flere egenskaper. Vi har til og med en bevissthetsdag rundt boksen.

Verdier

  • content-box: Standaren. Verdiene for bredde og høyde gjelder bare for elementets innhold. Polstring og kant er lagt på utsiden av boksen.
  • padding-box: Verdiene for bredde og høyde gjelder elementets innhold og polstring. Rammen legges til på utsiden av boksen. Foreløpig støtter bare Firefox padding-boxverdien.
  • border-box: Verdiene for bredde og høyde gjelder for innhold, polstring og kantlinje.
  • inherit: arver boksstørrelsen til det overordnede elementet.

Eksempel

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

Den røde linjen mellom bildene representerer elementenes breddeverdi. Legg merke til at elementet med standard box-sizing: content-box;overstiger den deklarerte bredden når polstring og kant legges til på utsiden av innholdsboksen, mens elementet med box-sizing: border-box;anvendt passer helt innenfor den deklarerte bredden.

Bruke boksstørrelse

La oss si at du setter et element til width: 100px; padding: 20px; border: 5px solid black;. Som standard er den resulterende boksen 150 px bred. Det er fordi standardmodellen for boksstørrelse er content-box, som bare bruker et elements deklarerte bredde på innholdet, og plasserer polstring og kant utenfor elementets boks. Dette øker effektivt hvor mye plass elementet tar opp.

Hvis du endrer box-sizingtil padding-box, skyves polstringen inn i elementets boks. Deretter vil boksen være 110 px bred, med 20 pixel polstring på innsiden og 10 px kant på utsiden. Hvis du vil legge polstringen og kanten inn i boksen, kan du bruke den border-box. Boksen ville da være 100px bred - 10px kantlinje og 20px polstring skyves begge inn i elementets boks.

Demo

Se pennesammenligning av boksstørrelsesverdier av CSS-Tricks (@ css-tricks) på CodePen.

I slekt

  • width
  • height
  • padding
  • border

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
Eventuelle * † 3 * † 1 ‡ 7 * 8 * 2,1 * † Eventuelle *

* padding-boxstøttes ikke

† eldre versjoner krever -webkitprefiks (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozprefiks kreves opp til versjon 28, uprefiksert fra og med 29.