Blokkszintű és inline elemek

A HTML elemek viselkedése két fő kategóriába sorolható: blokkszintű (block-level) és soron belüli (inline). Ez a viselkedés meghatározza, hogyan jelenik meg az elem az oldalon, és hogyan viselkedik a környező elemekhez képest.

Blokkszintű elemek

A blokkszintű elemek mindig új sorban kezdődnek, és a teljes szélességet elfoglalják, amely elérhető számukra. Ilyenek például a <div>, <p>, <h1>–<h6>, <ul>, <ol>.

<div>This is a block element</div>
<p>This is a paragraph</p>
<h1>This is a heading</h1>

Inline elemek

Az inline elemek nem törik meg a sort, hanem a soron belül maradnak. Ezek csak annyi helyet foglalnak el, amennyi a tartalmukhoz szükséges. Példák: <span>, <a>, <strong>, <em>.

<span>This is inline</span>
<a href="#">This is a link</a>
<strong>This is bold</strong>

Fő különbségek

Blokkszintű elem egymás alá kerül, míg az inline elem egymás mellé. Fontos megérteni a különbséget, mert a HTML struktúra helyes felépítése nagyban függ ettől.

<div>
  <p>This is a paragraph inside a block element.</p>
  <a href="#">Link</a> and <span>text</span> are inline.
</div>

Blokk elemben inline elem – és fordítva

Az inline elemek gyakran részei egy nagyobb blokkszintű elemnek. Például egy <p> elemben lehet <strong> vagy <a> elem. Fordítva viszont nem ajánlott: soha ne tegyél blokkszintű elemet inline elembe (például <div> egy <span> belsejébe), mert ez nem érvényes HTML.

<p>This is a <strong>bold</strong> word inside a paragraph.</p>

Hogyan befolyásolja a megjelenést?

A blokkszintű elemek egymás alatt jelennek meg, és teljes szélességűek. Az inline elemek viszont ugyanabban a sorban maradnak, és csak annyi helyet foglalnak el, amennyi szükséges. Ez a különbség jól látszik, ha háttérszínt adunk nekik.

<div style="background: lightblue;">Block</div>
<span style="background: lightgreen;">Inline</span>

display: block és display: inline

CSS segítségével bármely elem megváltoztatható: egy inline elem lehet 'display: block', és fordítva. Ez lehetővé teszi, hogy a HTML struktúra megtartása mellett a megjelenést rugalmasan szabályozzuk.

Mikor melyiket használd?

Ha szeretnél egy teljes tartalmi blokkot létrehozni, használj blokkszintű elemet. Ha csak egy részletet, például egy szót szeretnél kiemelni, inline elem a megfelelő választás.