Elementy blokowe i liniowe

Czym są elementy blokowe i liniowe? 📦

W HTML elementy dzielimy na blokowe (block) i liniowe (inline).

• Element blokowy zajmuje całą dostępną szerokość i zaczyna się od nowej linii.
• Element liniowy zajmuje tylko tyle miejsca, ile potrzebuje i nie łamie linii.

To bardzo ważne przy układzie strony i stylowaniu CSS.

---

Przykłady elementów blokowych

Typowe elementy blokowe:

• <div>
• <p>
• <h1>–<h6>
• <ul>, <ol>, <li>
• <header>, <main>, <section>, <article>, <footer>

W przeglądarce każdy z nich zacznie się od nowej linii.

Przykład

<h1>Naglowek</h1>
<p>Pierwszy paragraf.</p>
<p>Drugi paragraf.</p>

Na stronie zobaczysz trzy wiersze tekstu.

---

Przykłady elementów liniowych

Typowe elementy liniowe:

• <span>
• <a>
• <strong>, <em>, <b>, <i>
• <img> (wizualnie zachowuje się jak inline-block)

Elementy liniowe układają się w jednej linii, obok siebie.

Przykład

<p>
  To jest zwykly tekst,
  <strong>a to pogrubiony</strong>
  i <em>pochylony</em> fragment w tej samej linii.
</p>

---

Różnice wizualne

Przykład

<div style="background: #ede7f6;">DIV 1</div>
<div style="background: #d1c4e9;">DIV 2</div>

<span style="background: #ffecb3;">SPAN 1</span>
<span style="background: #ffe082;">SPAN 2</span>

• div pojawi się jeden pod drugim,
• span pojawi się obok siebie w jednym wierszu.

---

Dlaczego to ważne? 🤔

Rodzaj elementu wpływa na:

• sposób wyświetlania treści,
• możliwość ustawiania szerokości/wysokości,
• zachowanie przy stylowaniu CSS.

Elementy blokowe domyślnie:

• zajmują całą szerokość,
• możesz ustawić width, height, margin, padding.

Elementy liniowe domyślnie:

• dopasowują się do treści,
• nie mają własnej szerokości/wysokości,
• reagują głównie na padding w poziomie.

---

Zmiana typu wyświetlania w CSS

CSS pozwala zmienić zachowanie elementu:

• display: block;
• display: inline;
• display: inline-block;

Przykład

<a href="#" style="display: block; background: #bbdefb;">Link jak blok</a>
<div style="display: inline; background: #ffcdd2;">DIV jak tekst</div>

---

Dobre praktyki

• używaj elementów zgodnie z ich przeznaczeniem semantycznym (np. <p> na akapity, <h1> na tytuł),
• do czystego „opakowywania” treści używaj <div> (blokowy) lub <span> (liniowy),
• unikaj nadużywania <div> tam, gdzie istnieją lepsze znaczniki (np. <header>, <nav>).

---

Ćwiczenie

1. Utwórz plik HTML.
2. Dodaj kilka div i span z różnymi kolorami tła.
3. Zaobserwuj, jak układają się na stronie.
4. Zmień ich display w CSS i sprawdź różnice.