Display-egenskab: Block, Inline og Inline-block
Stryg for at vise menuen
HTML-elementer opfører sig forskelligt afhængigt af, om de er blok, inline eller inline-blok. Disse displaytyper påvirker layout, afstand og hvilke CSS-egenskaber, der kan anvendes.
Blokelementer
- Starter på en ny linje;
- Fylder hele bredden af deres container;
- Understøtter width, height, margin, padding og border.
Almindelige eksempler: <div>, <p>, <ul>, <li>, <h1>–<h6>.
index.html
index.css
Inline-elementer
- Forbliver på samme linje;
- Optager kun den plads, deres indhold kræver;
- Kan ikke få bredde eller højde anvendt (men kant virker).
Almindelige eksempler: <a>, <span>, <img>, <input>.
index.html
index.css
Inline-block-elementer
- Forbliver inline, som tekst;
- Understøtter bredde, højde, margin, padding og kant, ligesom blok-elementer.
Eksempler: <button>, <select>, <textarea>.
Nyttige, når elementer skal stå side om side, men stadig tillade fuld kontrol over styling.
index.html
index.css
Nøgleforskelle
Property | Block | Inline | Inline-Block |
|---|---|---|---|
Ny linje | Ja | Nej | Nej |
Fuld bredde | Ja | Nej | Nej |
Breddekontrol | Ja | Nej | Ja |
Højde kontrol | Ja | Nej | Ja |
Var alt klart?
Tak for dine kommentarer!
Sektion 1. Kapitel 12
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Sektion 1. Kapitel 12
