CSS Academy · leksjon

Block kontra Inline kontra Inline-Block

Forstå forskjellene mellom visningsatferden til block, inline og inline-block.

Leksjon 1 av 413 trinn

Block kontra Inline kontra Inline-Block er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 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.

display-egenskapen

display-egenskapen er en av de mest grunnleggende egenskapene i CSS. Den bestemmer hvordan et element deltar i layoutflyten — om det oppretter en blokkboks, en inline-boks eller noe midt imellom.

Blokkelementer

Blokkelementer begynner på en ny linje og strekker seg over hele bredden til beholderen. Det er mulig å angi width, height, margin og padding på alle sider.

Blokkelementer som standard: div, p, h1-h6, section, article.

<div>I'm a block element — full width, centered.</div>

Inline-elementer

Inline-elementer flyter inne i tekst. De begynner ikke på en ny linje. Det har ingen effekt å angi width eller height. Margin øverst og nederst ignoreres, mens horisontal margin og padding fungerer.

Inline-elementer som standard: span, a, strong, em, img.

<p>This is <span>an inline span</span> inside a paragraph.</p>

Inline-block-elementer

display: inline-block er en kombinasjon. Elementer flyter inline (uten tvungen linjeskift), men støtter width, height og alle box-modellegenskaper på samme måte som blokkelementer.

<a class="btn" href="#">Click Me</a>

Inline-block for navigasjon

Før Flexbox ble inline-block brukt til horisontale navigasjonsfelt. En ulempe er at mellomrom i HTML-kilden oppretter små mellomrom mellom elementene.

<ul><li>Home</li><li>About</li><li>Contact</li></ul>

Fjerne mellomrommet mellom inline-elementer

Mellomrommet mellom inline-block-elementer kan fjernes ved å angi font-size: 0 på foreldreelementet og gjenopprette verdien på underelementene, eller ved å fjerne mellomrommet i HTML.

<ul><li>One</li><li>Two</li><li>Three</li></ul>

Erstatte inline-block med Flex

I moderne CSS er display: flex på foreldreelementet den foretrukne måten å lage horisontale oppsett på uten problemer med mellomrom. inline-block er fortsatt nyttig for størrelsesangivelse av enkeltelementer.

Endre display

Display-typen til ethvert element kan endres med CSS. Dette brukes ofte til å gi lenker knappform eller gjøre listeelementer horisontale.

<a class="button" href="#">Button</a>
<ul><li>Item 1</li><li>Item 2</li></ul>

Table-displayverdier

CSS tilbyr display: table, display: table-row, display: table-cell og så videre for å bruke tabellayout på elementer som ikke er tabeller. Dette trengs sjelden i dag, men er nyttig for vertikal sentrering i eldre sammenhenger.

Flow root: display: flow-root

display: flow-root oppretter en ny block formatting context uten bivirkningene til overflow: hidden. Den opphever effekten av floats og hindrer at margin-kollaps lekker ut av en beholder.

<div class="clearfix">Contains floated children without collapsing.</div>

Anonyme bokser

Når blokk- og inline-elementer blandes som søsken, pakker nettleseren foreldreløst inline-innhold inn i anonyme blokkbokser. Denne oppførselen er usynlig, men forklarer uventede forskyvninger i layouten.

Rask kontroll

Hvilken display-verdi gjør det mulig å angi width samtidig som elementet forblir i inline-flyten?

Besvar den i den interaktive leksjonen

Oppsummering

Blokkelementer bruker hele bredden og begynner på en ny linje. Inline-elementer flyter sammen med tekst og ignorerer width/height. Inline-block kombinerer begge deler: elementet flyter inline, men godtar width og height. Moderne oppsett foretrekker Flexbox og Grid fremfor inline-block-rutenett.

Gratis å komme i gang

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Block kontra Inline kontra Inline-Block» gratis?

Ja – hele teksten i «Block kontra Inline kontra Inline-Block» 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 «Block kontra Inline kontra Inline-Block»?

Forstå forskjellene mellom visningsatferden til block, inline og inline-block. 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 1 av 4.

Hvor lang tid tar leksjonen «Block kontra Inline kontra Inline-Block»?

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

← Tilbake til CSS Academy