Mi a különbség a block és az inline elemek között?

Question

Accepted Answer

Minden elemnek van egy alapértelmezett **display** viselkedése, amely szabályozza, hogyan áramlik az elrendezésben. - A **block** elemek új **sorban** kezdődnek és a **teljes rendelkezésre álló szélességet** foglalják el. Elfogadják a width/height és az összes margins/paddings értékeit. Példák: `

`, `

`, `
`, `
`. - Az inline elemek egy soron belül áramlanak, csak a tartalmuk szélességéig, és figyelmen kívül hagyják a width/height és a felső/alsó margókat. Példák: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Miért számít ez ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` A `width`/`height` beállítása egy inline elemen nem csinál semmit. A megoldás a display módosítása: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — a legjobb mindkettőből Az `inline-block` a szövegáramlásban ül (egymás mellett) és* tiszteletben tartja a width/height/margins értékeket — tökéletes a navigációs elemekhez, jelvényekhez vagy egy sorban elrendezett gombokhoz. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Miért számít ez Az alapértelmezett display megértése magyarázza, miért nem veszi fel a `` a magasságot, miért rakódnak egymásra a `
`-ek, és mikor kell az `inline-block`, `flex` vagy `grid` értékre váltani. Ez az alapja annak, hogy az elemek hogyan rendezkednek el, mielőtt bármilyen elrendezési rendszert alkalmazna.