Display-Egenskap: Block, Inline og Inline-Block

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>.

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>.

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.

Viktige forskjeller