CSS Academy · Lektion

Förstå width, height, margin och padding

Lär dig hur width, height, margin och padding definierar elements mått och avstånd.

Lektion 1 av 413 steg

Förstå width, height, margin och padding är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 1 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.

Boxmodellens koncept

Varje HTML-element återges som en rektangulär ruta. CSS:s boxmodell beskriver de fyra lager som bygger upp rutan inifrån och ut: content → padding → border → margin.

width och height

width och height anger måtten för innehållsområdet. Som standard läggs padding och border till utöver dessa mått.

<div class="box"></div>

padding

padding är ett genomskinligt utrymme innanför border, mellan innehållet och border-kanten. Det ingår i det område där elementet är klickbart och där bakgrunden målas.

<div class="card">Card content</div>

Padding-egenskaper i långform

Varje sida kan anges individuellt:

<div class="element">Padded element</div>

margin

margin är ett genomskinligt utrymme utanför border. Det skjuter bort andra element. Negativa marginaler drar element närmare varandra eller låter dem överlappa.

<div class="section">Centered section with bottom margin</div>

Marginalkollaps

Vertikala marginaler kollapsar mellan intilliggande blockelement: det faktiska mellanrummet är den större av de två marginalerna, inte deras summa. Horisontella marginaler kollapsar aldrig.

<h2>Heading</h2>
<p>Paragraph below &mdash; margins collapse to 30px, not 50px.</p>

Förhindra marginalkollaps

Marginalkollaps förhindras när:

elementen är flex- eller grid-barn
en förälder har overflow: hidden
en förälder har padding mellan sig själv och det första underordnade elementet
ett inline-element separerar syskonelementen

auto-marginaler

Om du anger horisontella marginaler som auto för ett blockelement med fast bredd centreras det i sin behållare. Detta är den klassiska tekniken för centrering.

<div class="centered">Centered block, max 800px wide</div>

min-width max-width min-height max-height

Begränsa måtten med minimi- och maximigränser så att elementen förblir läsbara på olika skärmstorlekar:

<div class="content">Readable content column capped at 65 characters wide.</div>

Beräkna elementets totala storlek

I standardmodellen content-box är total bredd = width + padding-left + padding-right + border-left + border-right. Detta kan vara överraskande och är anledningen till att border-box föredras.

Logiska egenskaper för marginaler och padding

Modern CSS erbjuder logiska motsvarigheter: margin-block, margin-inline, padding-block-start och så vidare. Dessa anpassas automatiskt efter skrivriktningen.

<div class="card">Logical padding-block/inline</div>

Snabbtest

Vilka lager ingår i ett blockelements totala återgivna bredd i standardmodellen för boxmodellen?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Boxmodellens lager är content, padding, border och margin. Padding ligger innanför border, medan margin ligger utanför. Vertikala marginaler kollapsar mellan intilliggande syskonelement. Använd margin: 0 auto tillsammans med en fast bredd för att centrera blockelement.

Gratis att börja

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

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Förstå width, height, margin och padding” gratis?

Ja – hela texten till ”Förstå width, height, margin och padding” 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 ”Förstå width, height, margin och padding”?

Lär dig hur width, height, margin och padding definierar elements mått och avstånd. 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 1 av 4.

Hur lång tid tar lektionen ”Förstå width, height, margin och padding”?

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

← Tillbaka till CSS Academy