Display-egenskap: Block, Inline och Inline-block
Svep för att visa menyn
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 du kan använda.
Blockelement
- Börjar på en ny rad;
- Upptar hela bredden av sin behållare;
- Stöder width, height, margin, padding och border.
Vanliga exempel: <div>, <p>, <ul>, <li>, <h1>–<h6>.
index.html
index.css
Inline-element
- Förblir på samma rad;
- Tar endast upp det utrymme som krävs för innehållet;
- Kan inte ha bredd eller höjd tillämpad (men kantlinje fungerar).
Vanliga exempel: <a>, <span>, <img>, <input>.
index.html
index.css
Inline-block-element
- Förblir inline, som text;
- Stöder bredd, höjd, marginal, utfyllnad och kantlinje, likt blockelement.
Exempel: <button>, <select>, <textarea>.
De är användbara när du behöver element sida vid sida, men ändå vill ha full kontroll över utseendet.
index.html
index.css
Viktiga skillnader
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 1. Kapitel 14
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Avsnitt 1. Kapitel 14
