Display-Egenskap: Block, Inline og Inline-Block
Sveip for å vise menyen
HTML-elementer oppfører seg forskjellig avhengig av om de er block, inline eller inline-block. Disse display-typene påvirker oppsett, avstand og hvilke CSS-egenskaper som kan brukes.
Blokkelementer
- Starter på en ny linje;
- Opptar hele bredden til beholderen sin;
- Støtter width, height, margin, padding og border.
Vanlige eksempler: <div>, <p>, <ul>, <li>, <h1>–<h6>.
index.html
index.css
Inline-elementer
- Holder seg på samme linje;
- Tar kun opp plassen som trengs for innholdet;
- Kan ikke få bredde eller høyde (men kantlinje fungerer).
Vanlige eksempler: <a>, <span>, <img>, <input>.
index.html
index.css
Inline-block-elementer
- Holder seg inline, som tekst;
- Støtter bredde, høyde, margin, padding og kantlinje, som blokk-elementer.
Eksempler: <button>, <select>, <textarea>.
Nyttige når du trenger elementer ved siden av hverandre, men fortsatt ønsker full kontroll over styling.
index.html
index.css
Viktige forskjeller
Property | Block | Inline | Inline-Block |
|---|---|---|---|
New line | Ja | Nei | Nei |
Full width | Ja | Nei | Nei |
Width control | Ja | Nei | Ja |
Height control | Ja | Nei | Ja |
Alt var klart?
Takk for tilbakemeldingene dine!
Seksjon 1. Kapittel 12
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Seksjon 1. Kapittel 12
