Elementy blokowe i liniowe

W HTML każdy element należy do jednej z dwóch głównych kategorii: blokowych lub liniowych. Te kategorie mają wpływ na to, jak elementy zachowują się na stronie – jak zajmują miejsce i jak „układają się” względem innych elementów.

1. Elementy blokowe (block-level)

Element blokowy zawsze zaczyna się od nowej linii i domyślnie zajmuje całą dostępną szerokość swojego rodzica (np. strony, sekcji, div-a).

Typowe elementy blokowe to:

<div>
<p>
<h1> do <h6>
<section>, <article>, <header>, <footer>
<ul>, <ol>, <li>

<div>To jest pierwszy blok</div>
<div>To jest drugi blok</div>

Efekt:

To jest pierwszy blok

To jest drugi blok

Jak widzisz – każdy z bloków zaczyna się od nowej linii i rozciąga się na całą szerokość.

2. Elementy liniowe (inline)

Elementy liniowe (inline) nie przerywają linii. Są wyświetlane w jednej linii z innymi elementami, a ich szerokość zależy od zawartości.

Typowe elementy inline:

<span>
<a>
<strong>, <em>, <code>
<img>

To jest element liniowy w tekście.

Efekt:

To jest element liniowy w tekście.

Jak widzisz, element <span> nie przerywa tekstu i znajduje się w jednej linii z innymi słowami.

3. Różnice podsumowane

Właściwość	Element blokowy	Element liniowy
Układ	Od nowej linii	W jednej linii
Szerokość	Cała dostępna	Według zawartości
Możliwość ustawiania `width`, `height`	✅ Tak	❌ Nie (w większości przypadków)

Warto zapamiętać ten podział, bo ma ogromny wpływ na sposób budowania layoutów w HTML i CSS.

🎯 Ćwiczenie w JSFiddle

Wejdź na JSFiddle i przetestuj działanie elementów blokowych i liniowych:

HTML:

<div style="background-color: lightblue;">Blokowy DIV 1</div>
<div style="background-color: lightgreen;">Blokowy DIV 2</div>

<p>
  Tekst z <span style="background-color: yellow;">elementem inline</span> w środku.
</p>

Kliknij Run, by zobaczyć, jak te elementy się zachowują!

✅ Podsumowanie

Elementy blokowe zajmują całą szerokość i zaczynają się od nowej linii.
Elementy liniowe mieszczą się w jednej linii i dostosowują szerokość do treści.
Typ elementu wpływa na to, jak możesz go stylować (np. ustawiać width, height).

W kolejnym temacie nauczysz się ustawiać szerokość i wysokość elementów – czyli przejmiesz kontrolę nad rozmiarem każdego „pudełka” na stronie!

Previous Zagadnienie

Back to Zagadnienie

Next Temat