Summary  
This chapter covers the behavior and limitations of CSS inline elements, showing that they default to display:inline, cannot have explicit width or height, and only horizontal margins, padding, and borders affect their layout.  

General domain of usage  
Front-end web development

**Inline-elementer** forbliver på én linje og brydes til næste linje, når der ikke er mere plads. Denne adfærd styres af CSS-egenskaben `display: inline`.

Vigtige punkter om inline-elementer:
- De har som standard `display: inline`;
- Deres bredde og højde bestemmes af deres indhold og kan ikke angives eksplicit;
- Kun horisontale egenskaber som `padding`, `margin` og `border` kan anvendes.

Lad os undersøge et eksempel, hvor nogle stilarter påvirker elementet, mens andre ikke gør, i CSS-filen:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxhIGhyZWY9Imh0dHBzOi8vd3d3Lmdvb2dsZS5jb20vIiB0YXJnZXQ9Il9ibGFuayI+R29vZ2xlPC9hPgogIDwvYm9keT4KPC9odG1sPg==

LyogVGhlc2UgcHJvcGVydGllcyB3b3JrICovCmEgewogIGJvcmRlci1sZWZ0OiAxcHggc29saWQgZmlyZWJyaWNrOwogIGJvcmRlci1yaWdodDogM3B4IGRhc2hlZCBzZWFncmVlbjsKICBwYWRkaW5nLWxlZnQ6IDEwcHg7CiAgcGFkZGluZy1yaWdodDogNXB4OwogIG1hcmdpbi1sZWZ0OiA1cHg7CiAgbWFyZ2luLXJpZ2h0OiAxNXB4Owp9CgovKiBUaGVzZSBwcm9wZXJ0aWVzIGRvbid0IHdvcmsgKi8KYSB7CiAgd2lkdGg6IDMwMHB4OwogIGhlaWdodDogNTAwcHg7CiAgbWFyZ2luLXRvcDogNTBweDsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9

Som standard har **inline** elementer et mellemrum på højre side; for `img`-elementer er dette mellemrum i bunden. Dette mellemrum skyldes ikke `padding` eller `margin`. I stedet er det et indbygget tomrum, som browsere tilføjer for at sikre afstand mellem hvert element.

Læs Mere

PGh0bWwgbGFuZz0iZW4iPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHNwYW4+VGV4dC0xPC9zcGFuPgogICAgPHNwYW4+VGV4dC0yPC9zcGFuPgogICAgPHNwYW4+VGV4dC0zPC9zcGFuPgogIDwvYm9keT4KPC9odG1sPg==

Behersk det grundlæggende i CSS (Cascading Style Sheets), sproget til at style og ændre udseendet af websider. Udforsk kernekoncepter som tekstformatering, farver, afstande, box-modellen, Flexbox og dekorative effekter. Opbyg kompetencer til at skabe visuelt tiltalende og velstrukturerede websider. Ideel for begyndere, der ønsker et solidt fundament i CSS.

Lær hvad CSS er, hvordan det forbindes med HTML, og hvordan HTML-elementer styles ved hjælp af selektorer. Udforsk grundlæggende begreber som tekstfarver, brugerhandlings-pseudoklasser og variabler i CSS.

Opdag, hvordan du kan formatere og style tekst på dine websider. Lær at anvende brugerdefinerede skrifttyper og udforsk forskellige skrifttypeegenskaber for at forbedre tekstens udseende.

Lær det grundlæggende om boksmodellen, som definerer layout og afstand for elementer på en webside. Udforsk begreber som boksstørrelse, tilføjelse af afstand til elementer, arbejde med blok- og inline-elementer samt anvendelse af strukturelle og funktionelle pseudoklasser til avanceret styling.

Opdag Flexbox, en effektiv CSS-layoutmetode til at arrangere elementer i rækker og kolonner. Lær at kontrollere retning, justering og afstand af elementer horisontalt og vertikalt samt tilpasse individuelle flex-elementer for præcise layouts.

Lær, hvordan du forbedrer det visuelle udtryk på dine websider med CSS. Udforsk teknikker til anvendelse af baggrundsfarver og -billeder, billedstyling, brug af dekorative pseudo-elementer samt tilføjelse af skygger for at skabe imponerende designs.

Arbejde med Inline-Elementer

Awesome!

Arbejde med Inline-Elementer