Box-sizing: Content-Box kontra Border-Box
Forstå hvordan box-sizing endrer hvordan beregninger av bredde og høyde inkluderer padding og kantlinje.
Box-sizing: Content-Box kontra Border-Box er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Problemet med box-sizing
Som standard setter CSS width bare på innholdsområdet. Hvis De legger til padding eller border, øker elementets faktiske gjengitte størrelse, noe som kan være forvirrende og føre til feil.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (Standard)
box-sizing: content-box er standardinnstillingen. width og height gjelder bare innholdet. Padding og border legges oppå, slik at elementet blir større enn den angitte størrelsen.
border-box
Med box-sizing: border-box inkluderer width og height innhold + padding + border. Elementet beholder nøyaktig den angitte størrelsen, uavhengig av padding eller border.
<div class="box">Exactly 200px rendered width</div>
Den universelle border-box-reseten
Bruk border-box globalt med den universelt anbefalte reseten:
<div class="demo-box">Width stays exactly 200px</div>
Hvorfor inherit i stedet for *
Et alternativt mønster gjør det mulig for komponenter å overstyre box-sizing ved behov:
<div class="demo-box">Inherited border-box sizing</div>
Prosentbredde + padding
Den viktigste praktiske fordelen med border-box gjelder prosentbredder. Et element med width: 50% og 20px padding forblir nøyaktig 50 % av foreldreelementet uten overflow.
<div class="col">50% wide column with padding, no overflow</div>
border-box inkluderer ikke margin
Selv med border-box er margin ikke inkludert i den angitte bredden. Margin legger alltid til plass utenfor elementet, i tillegg til de angitte målene.
Historikk: Hvorfor er content-box standard?
Historisk var nettleserne uenige om box-modellen. W3C standardiserte content-box, mens IE brukte border-box. Moderne CSS bruker content-box som standard for å følge W3C-standarden, men praktisk talt alle prosjekter overstyrer dette til border-box.
Undersøke box-modellen i DevTools
I Chrome DevTools viser Elements-panelet et box model-diagram med nøyaktige mål for innhold, padding, border og margin. Dette er den raskeste måten å feilsøke problemer med størrelser på.
Grid og Flexbox bruker border-box internt
CSS Grid og Flexbox beregner alltid størrelsen på spor og elementer med border-box-semantikk, uavhengig av elementets egen box-sizing-innstilling. Dette gjør størrelsesberegningene forutsigbare.
min/max med border-box
min-width, max-width, min-height og max-height fungerer på samme måte som width — de inkluderer padding og border når border-box er aktivert.
Rask kontroll
Med box-sizing: border-box har et element som er angitt som width: 300px; padding: 30px; en innholdsbredde på:
Oppsummering
box-sizing: border-box inkluderer padding og border i den angitte bredden, slik at uventet størrelsesøkning unngås. Bruk dette globalt med *, *::before, *::after { box-sizing: border-box }. Margin er aldri inkludert i noen av box-modellene.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Box-sizing: Content-Box kontra Border-Box» gratis?
Ja – hele teksten i «Box-sizing: Content-Box kontra Border-Box» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Box-sizing: Content-Box kontra Border-Box»?
Forstå hvordan box-sizing endrer hvordan beregninger av bredde og høyde inkluderer padding og kantlinje. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Box-sizing: Content-Box kontra Border-Box»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Forstå width, height, margin og padding
- Kantlinjestil, -bredde og -farge
- Box-sizing: Content-Box kontra Border-Box
- Outline og Box-Shadow