Display-egenskap Block, Inline och Inline-block

HTML-element beter sig olika beroende på om de är block, inline eller inline-block. Dessa displaytyper påverkar layout, avstånd och vilka CSS-egenskaper som kan användas.

Blockelement

• Börjar på en ny rad;
• Upptar hela bredden av sin behållare;
• Stödjer width, height, margin, padding och border.

Vanliga exempel: <div>, <p>, <ul>, <li>, <h1>–<h6>.

Inline-element

• Förblir på samma rad;
• Tar endast upp det utrymme som krävs för innehållet;
• Kan inte få bredd eller höjd tilldelad (men kantlinje fungerar).

Vanliga exempel: <a>, <span>, <img>, <input>.

Inline-block-element

• Förblir inline, som text;
• Stödjer bredd, höjd, marginal, utfyllnad och kantlinje, likt blockelement.

Exempel: <button>, <select>, <textarea>.

De är användbara när du behöver att element ska ligga sida vid sida, men ändå tillåta full kontroll över utseendet.

Viktiga skillnader