Box-sizing: content-box jämfört med border-box
Förstå hur box-sizing ändrar hur width- och height-beräkningar inkluderar padding och kantlinjer.
Box-sizing: content-box jämfört med border-box är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Problemet med box-sizing
Som standard anger CSS width endast för innehållsområdet. Om du lägger till padding eller border ökar elementets faktiska återgivna storlek, vilket är förvirrande och lätt leder till fel.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (Standard)
box-sizing: content-box är standardinställningen. width och height gäller endast innehållet. Padding och border läggs ovanpå, så elementet blir större än den angivna storleken.
border-box
Med box-sizing: border-box inkluderar width och height innehåll + padding + border. Elementet behåller exakt den deklarerade storleken oavsett padding eller border.
<div class="box">Exactly 200px rendered width</div>
Den universella återställningen till border-box
Tillämpa border-box globalt med den allmänt rekommenderade återställningen:
<div class="demo-box">Width stays exactly 200px</div>
Varför inherit i stället för *
Ett alternativt mönster gör att komponenter kan åsidosätta box-sizing vid behov:
<div class="demo-box">Inherited border-box sizing</div>
Procentuell bredd + padding
Den främsta praktiska fördelen med border-box märks vid procentuella bredder. Ett element med width: 50% och 20px padding behåller exakt 50 % av sin förälders bredd utan att överskrida den.
<div class="col">50% wide column with padding, no overflow</div>
border-box inkluderar inte margin
Även med border-box ingår margin inte i den deklarerade bredden. Margin lägger alltid till utrymme utanför elementet, utöver dess angivna dimensioner.
Historik: Varför är content-box standard?
Historiskt sett var webbläsare oense om boxmodellen. W3C standardiserade content-box, medan IE använde border-box. Modern CSS har content-box som standard för att följa W3C-standarden, men i praktiskt taget alla projekt ändras detta till border-box.
Inspektera boxmodellen i DevTools
I Chrome DevTools visar panelen Elements ett diagram över boxmodellen med exakta dimensioner för innehåll, padding, border och margin. Det här är det snabbaste sättet att felsöka storleksproblem.
Grid och Flexbox använder border-box internt
CSS Grid och Flexbox dimensionerar alltid gridspår och objekt enligt border-box-semantik, oavsett elementets egen inställning av box-sizing. Det gör storleksberäkningarna förutsägbara.
min/max med border-box
min-width, max-width, min-height och max-height fungerar på samma sätt som width — de inkluderar padding och border när border-box är aktivt.
Snabb kontroll
Med box-sizing: border-box har ett element som deklarerats med width: 300px; padding: 30px; en innehållsbredd på:
Sammanfattning
box-sizing: border-box inkluderar padding och border i den deklarerade bredden, vilket förhindrar oväntad storleksökning. Tillämpa det globalt med *, *::before, *::after { box-sizing: border-box }. Margin inkluderas aldrig i någon av boxmodellerna.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Box-sizing: content-box jämfört med border-box” gratis?
Ja – hela texten till ”Box-sizing: content-box jämfört med border-box” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Box-sizing: content-box jämfört med border-box”?
Förstå hur box-sizing ändrar hur width- och height-beräkningar inkluderar padding och kantlinjer. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Box-sizing: content-box jämfört med border-box”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Förstå width, height, margin och padding
- Kantlinjers stil, bredd och färg
- Box-sizing: content-box jämfört med border-box
- Outline och box-shadow