Forståelse af width, height, margin og padding
Lær, hvordan width, height, margin og padding definerer elementers dimensioner og afstande.
Forståelse af width, height, margin og padding er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
Konceptet bag boksmodellen
Alle HTML-elementer gengives som rektangulære bokse. CSS' box model beskriver de fire lag, som boksen består af indefra og ud: indhold → indvendig afstand → kant → udvendig afstand.
width og height
width og height angiver dimensionerne for indholdsområdet. Som standard lægges indvendig afstand og kant oven i denne størrelse.
<div class="box"></div>
padding
padding er gennemsigtig plads inden for kanten mellem indholdet og kantens inderside. Det er en del af elementets klikbare og baggrundsfarvede område.
<div class="card">Card content</div>
Udvidede padding-egenskaber
Hver side kan angives individuelt:
<div class="element">Padded element</div>
margin
margin er gennemsigtig plads uden for kanten. Den skubber andre elementer væk. Negative margener trækker elementer tættere på hinanden eller får dem til at overlappe.
<div class="section">Centered section with bottom margin</div>
Sammenfoldning af margener
Lodrette margener foldes sammen mellem tilstødende blokelementer: Den faktiske afstand er den største af de to margener, ikke deres sum. Vandrette margener foldes aldrig sammen.
<h2>Heading</h2>
<p>Paragraph below — margins collapse to 30px, not 50px.</p>
Sådan forhindrer du sammenfoldning af margener
Sammenfoldning af margener forhindres, når:
- Elementer er flex- eller grid-børn
- En overordnet har
overflow: hidden - En overordnet har
paddingmellem sig selv og det første barn - Et inline-element adskiller søskendeelementerne
auto-margener
Hvis du angiver vandrette margener som auto på et blokelement med en fast bredde, centreres det i sin beholder. Det er den klassiske centreringsteknik.
<div class="centered">Centered block, max 800px wide</div>
min-width max-width min-height max-height
Begræns dimensionerne med minimums- og maksimumsgrænser, så elementerne forbliver læsbare på tværs af skærmstørrelser:
<div class="content">Readable content column capped at 65 characters wide.</div>
Beregning af elementets samlede størrelse
I standardmodellen content-box er den samlede bredde = width + padding-left + padding-right + border-left + border-right. Det kan være overraskende og er grunden til, at border-box foretrækkes.
Logiske egenskaber for margin og padding
Moderne CSS tilbyder logiske ækvivalenter: margin-block, margin-inline, padding-block-start osv. De tilpasser sig automatisk skriveretningen.
<div class="card">Logical padding-block/inline</div>
Hurtigt tjek
Hvilke lag indgår i den samlede gengivne bredde af et blokelement i standardboksmodellen?
Opsummering
Boksmodellens lag er indhold, indvendig afstand, kant og udvendig afstand. Indvendig afstand er inden for kanten, mens udvendig afstand er uden for. Lodrette margener foldes sammen mellem tilstødende søskendeelementer. Brug margin: 0 auto sammen med en fast bredde til at centrere blokelementer.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Forståelse af width, height, margin og padding” gratis?
Ja — hele teksten til “Forståelse af width, height, margin og padding” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Forståelse af width, height, margin og padding”?
Lær, hvordan width, height, margin og padding definerer elementers dimensioner og afstande. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Forståelse af width, height, margin og padding”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Forståelse af width, height, margin og padding
- Kantlinjers stil, bredde og farve
- Box-sizing: Content-Box kontra Border-Box
- Outline og box-shadow