Summary  
This chapter explains the CSS display property by detailing the behaviors and styling capabilities of block, inline, and inline-block elements and how they impact element layout and spacing.

General domain of usage  
Front-end web page layout and styling

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

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxvbD4KICAgICAgPGxpPjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvcD48L2xpPgogICAgICA8bGk+PHA+TG9yZW0gaXBzdW08L3A+PC9saT4KICAgICAgPGxpPjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvcD48L2xpPgogICAgPC9vbD4KICAgIDx1bD4KICAgICAgPGxpPjxoND5Mb3JlbSwgaXBzdW0uPC9oND48L2xpPgogICAgICA8bGk+PGg0PkxvcmVtLCBpcHN1bSBkb2xvci48L2g0PjwvbGk+CiAgICAgIDxsaT48aDQ+TG9yZW0sIGlwc3VtIGRvbG9yLjwvaDQ+PC9saT4KICAgIDwvdWw+CiAgPC9ib2R5Pgo8L2h0bWw+

aDQgewogIHBhZGRpbmc6IDEycHg7Cn0KCnAgewogIGJvcmRlcjogMXB4IHNvbGlkIHRhbjsKfQ==

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

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIC8+CiAgICA8c3Bhbj5Mb3JlbSwgaXBzdW0gZG9sb3IuPC9zcGFuPgogICAgPGEgaHJlZj0iIyI+TG9yZW0sIGlwc3VtLjwvYT4KICAgIDxzcGFuPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyLjwvc3Bhbj4KICA8L2JvZHk+CjwvaHRtbD4=

c3BhbiB7CiAgYm9yZGVyOiAycHggc29saWQgd2hlYXQ7Cn0=

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

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0ic2VuZC1idG4iPlNlbmQgcmVxdWVzdDwvYnV0dG9uPgogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGNsYXNzPSJzdWJtaXQtYnRuIj5TdWJtaXQgZm9ybTwvYnV0dG9uPgogIDwvYm9keT4KPC9odG1sPg==

LyogU2V0IGNvbW1vbiBzdHlsZXMgZm9yIGFsbCBidXR0b24gZWxlbWVudHMgKi8KYnV0dG9uIHsKICBjdXJzb3I6IHBvaW50ZXI7Cn0KCi5zZW5kLWJ0biB7CiAgcGFkZGluZzogMTBweCAyMHB4OwogIGJhY2tncm91bmQtY29sb3I6IHllbGxvd2dyZWVuOwogIGNvbG9yOiBzbGF0ZWJsdWU7CiAgZm9udC1zaXplOiAyNHB4Owp9Cgouc3VibWl0LWJ0biB7CiAgcGFkZGluZzogNXB4IDE4cHg7CiAgYm9yZGVyOiAxcHggc29saWQgYnJvd247CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Ymx1ZTsKICBjb2xvcjogZGFya2JsdWU7CiAgZm9udC13ZWlnaHQ6IDYwMDsKfQ==

Vad är den största skillnaden mellan block- och inline-element?

Behärska grunderna i CSS, det stiliseringsspråk som förändrar utseendet och känslan på webbsidor. Utforska centrala koncept såsom textstilar, färger, avstånd, boxmodellen, Flexbox och dekorativa effekter. Bygg upp färdigheter för att skapa visuellt tilltalande och välstrukturerade webbsidor.

Förstå hur CSS kopplas till HTML och hur stilar tillämpas genom selektorer.
Tillämpning av färger, textformatering och hovringseffekter för att styra visuell presentation.

Förbättra typografi med hjälp av radavstånd, mellanrum, typsnittsegenskaper och anpassade typsnitt. Kontrollera typsnittsfamiljer, vikt, stil och storlek för ökad läsbarhet.

Styr layoutstruktur med hjälp av marginaler, utfyllnad, ramar och bredd-egenskaper. Förstå boxmodellens storlekshantering och elementens visningstyper såsom block, inline och inline-block.

Styr horisontella och vertikala layouter med Flexbox-egenskaper. Justera riktning, justering och avstånd för att strukturera UI-komponenter.

Förbättra layouter med bakgrundsfärger, bilder, pseudo-element och skuggor. Styla visuella komponenter för djup och kontrast.

Property	Block	Inline	Inline-Block
New line	Ja	Nej	Nej
Full width	Ja	Nej	Nej
Width control	Ja	Nej	Ja
Height control	Ja	Nej	Ja

Display-egenskap: Block, Inline och Inline-block

Blockelement

Inline-element

Inline-block-element

Viktiga skillnader