Mikä on ero block- ja inline-elementtien välillä?

Question

Accepted Answer

Jokaisella elementillä on oletusarvoinen **display**-käyttäytyminen, joka ohjaa sen sijoittumista asettelussa. - **Block**-elementit alkavat **uudelta riviltä** ja käyttävät **koko saatavilla olevan leveyden**. Ne hyväksyvät leveys-/korkeus-arvot ja kaikki marginaalit/paddingin. Esimerkkejä: `

`, `

`, `
`, `
`. - Inline-elementit sijaitsevat rivin sisällä, vain niiden sisällön verran leveitä, ja jättävät huomioimatta leveys-/korkeus-arvot sekä ylempi/alempi marginaalit. Esimerkkejä: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Käytännön sudenkuoppa ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Leveyden/korkeuden asettaminen inline-elementille ei tee mitään. Ratkaisu on muuttaa sen displayä: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — paras molemmista `inline-block` sijaitsee tekstivirtauksessa (vierekkäin) ja* kunnioittaa leveys-/korkeus-/marginaali-arvoja — täydellinen navigaatiokohteiden, badgien tai peräkkäin asetettujen painikkeiden kanssa. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Miksi se on tärkeää Oletusarvon display-käyttäytymisen ymmärtäminen selittää, miksi ``-elementti ei ota korkeutta vastaan, miksi `
`-elementit pilaantuvat, ja milloin vaihtaa `inline-block`-arvoon, `flex`iin tai `grid`iin. Se on perusta sille, kuinka elementit järjestäytyvät ennen kuin käytät mitään asettelujärjestelmää.