Summary  
This chapter explains CSS inline elements’ default display behavior and box model constraints, showing that their width and height can’t be explicitly set and only horizontal padding, margin, and border properties take effect.

General domain of usage  
Web page styling and layout.

**Inline-elementit** pysyvät yhdellä rivillä ja siirtyvät seuraavalle riville, kun tila loppuu. Tätä käyttäytymistä ohjaa CSS-ominaisuus `display: inline`.

Keskeiset seikat inline-elementeistä:
- Oletusarvoisesti niillä on `display: inline`;
- Niiden leveys ja korkeus määräytyvät sisällön mukaan eikä niitä voi asettaa suoraan;
- Vain vaakasuuntaiset ominaisuudet, kuten `padding`, `margin` ja `border`, voidaan asettaa.

Tarkastellaan esimerkkiä, jossa jotkin tyylit vaikuttavat elementtiin ja toiset eivät, CSS-tiedostossa:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxhIGhyZWY9Imh0dHBzOi8vd3d3Lmdvb2dsZS5jb20vIiB0YXJnZXQ9Il9ibGFuayI+R29vZ2xlPC9hPgogIDwvYm9keT4KPC9odG1sPg==

LyogVGhlc2UgcHJvcGVydGllcyB3b3JrICovCmEgewogIGJvcmRlci1sZWZ0OiAxcHggc29saWQgZmlyZWJyaWNrOwogIGJvcmRlci1yaWdodDogM3B4IGRhc2hlZCBzZWFncmVlbjsKICBwYWRkaW5nLWxlZnQ6IDEwcHg7CiAgcGFkZGluZy1yaWdodDogNXB4OwogIG1hcmdpbi1sZWZ0OiA1cHg7CiAgbWFyZ2luLXJpZ2h0OiAxNXB4Owp9CgovKiBUaGVzZSBwcm9wZXJ0aWVzIGRvbid0IHdvcmsgKi8KYSB7CiAgd2lkdGg6IDMwMHB4OwogIGhlaWdodDogNTAwcHg7CiAgbWFyZ2luLXRvcDogNTBweDsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9

Oletusarvoisesti **inline**-elementeillä on rako oikealla puolella; `img`-elementeillä tämä rako on alareunassa. Tämä tila ei johdu `padding`- tai `margin`-ominaisuuksista. Sen sijaan selaimet lisäävät tämän tyhjän tilan automaattisesti varmistaakseen etäisyyden elementtien välillä.

Lisätietoa

PGh0bWwgbGFuZz0iZW4iPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHNwYW4+VGV4dC0xPC9zcGFuPgogICAgPHNwYW4+VGV4dC0yPC9zcGFuPgogICAgPHNwYW4+VGV4dC0zPC9zcGFuPgogIDwvYm9keT4KPC9odG1sPg==

Hallitse CSS:n (Cascading Style Sheets) perusteet, tyylikieli, joka muuttaa verkkosivujen ulkoasun ja tunnelman. Tutustu keskeisiin käsitteisiin, kuten tekstityyleihin, väreihin, välistyksiin, laatikkomalliin, Flexboxiin ja koristeellisiin tehosteisiin. Kehitä taidot luoda visuaalisesti houkuttelevia ja selkeästi jäsenneltyjä verkkosivuja. Sopii erinomaisesti aloittelijoille, jotka haluavat vahvan perustan CSS:stä.

Tutustu CSS:n perusteisiin, sen liittämiseen HTML:ään ja HTML-elementtien muotoiluun selektoreiden avulla. Perehdy keskeisiin käsitteisiin, kuten tekstin väreihin, käyttäjän toimintaan reagoiviin pseudoluokkiin ja CSS-muuttujiin.

Opi, kuinka tekstiä muotoillaan ja asetellaan verkkosivuilla. Tutustu mukautettujen fonttien käyttöön ja erilaisiin fonttiominaisuuksiin tekstin ulkoasun parantamiseksi.

Opi laatikkomallin perusteet, jotka määrittelevät elementtien asettelun ja välistyksen verkkosivulla. Tutustu käsitteisiin kuten laatikon koko, tilan lisääminen elementteihin, lohkotason ja rivinsisäisten elementtien käsittely sekä rakenteellisten ja toiminnallisten pseudoluokkien hyödyntäminen edistyneessä tyylittelyssä.

Tutustu Flexboxiin, tehokkaaseen CSS-asettelumenetelmään elementtien järjestämiseksi riveihin ja sarakkeisiin. Opi hallitsemaan elementtien suuntaa, kohdistusta ja välistystä vaaka- ja pystysuunnassa sekä mukauttamaan yksittäisiä flex-elementtejä tarkkoja asetteluja varten.

Opi parantamaan verkkosivujesi visuaalista ilmettä CSS:n avulla. Tutustu taustavärien ja -kuvien lisäämiseen, kuvien tyylittelyyn, koristeellisten pseudoelementtien käyttöön sekä varjojen lisäämiseen vaikuttavien suunnittelujen luomiseksi.

Työskentely Rivinsisäisten Elementtien Kanssa