<div> vs <span>
<div> jest blokowym kontenerem bez znaczenia, a <span> jego liniowym odpowiednikiem. Oba służą tylko do grupowania i stylowania, nigdy do opisu treści.
Porównanie w tabeli
#Domyślny display
Zaczyna nową linię
Respektuje width, height i margin-top/bottom
Może zawierać elementy blokowe
Typowe użycie
Przykład
#<div style="display: flex; gap: 12px; align-items: center;">
<div class="box">JS</div>
<div>
<strong>Kurs JavaScript</strong><br>
Twój postęp: <span style="color: #34d399; font-weight: 600;">12 z 20</span> lekcji
</div>
</div>Definicja i zastosowanie
#Oba elementy są neutralne: dla przeglądarki, czytników ekranu i wyszukiwarek nic nie znaczą. Różni je domyślny display. <div> jest blokowy, więc zaczyna nową linię, rozciąga się na całą szerokość rodzica i respektuje width, height oraz pionowe marginesy. <span> jest liniowy, więc płynie w tekście, nie przerywa linii, a jego szerokość i wysokość są ignorowane, dopóki nie zmienisz mu display.
To przekłada się na zawartość, jaką mogą mieć. <div> przyjmuje dowolną treść przepływu: akapity, listy, inne <div>, nawet nagłówki. <span> przyjmuje tylko treść frazową, czyli tekst i inne elementy liniowe. Wsadzenie do niego akapitu albo listy jest błędem.
Zanim sięgniesz po jeden z nich, sprawdź, czy nie pasuje element semantyczny. Grupa treści często powinna być <section> albo <article>, a fragment tekstu <strong>, <em> albo <mark>. <div> i <span> zostają na sytuacje, w których żaden z nich nie pasuje.
Składnia
#<div>...</div>
<span>...</span>Więcej przykładów
#<p>
Element <span style="width: 200px; height: 100px; background: #7c3aed;">span</span> z
width i height w stylu, ale to nie działa, bo jest liniowy.
</p><p>
Teraz działa:
<span style="display: inline-block; width: 120px; height: 40px; background: #0ea5e9; color: #fff; text-align: center; line-height: 40px;">inline-block</span>
</p>display: inline-block łączy oba światy: element stoi w linii, ale respektuje wymiary jak blok.
Dobre praktyki
#- Zawsze sprawdź najpierw, czy nie pasuje element semantyczny, np.
<section>,<nav>albo<strong>. - Nie zagnieżdżaj w
<span>elementów blokowych, w tym<div>. - Mnóstwo
<div>jeden w drugim ("divitis") utrudnia czytanie kodu. Każdy powinien mieć konkretne zadanie.
Powiązane hasła
#- <div>Uniwersalny kontener blokowy bez znaczenia, do grupowania elementów i stylowania.
- <span>Uniwersalny kontener liniowy bez znaczenia, do stylowania fragmentu tekstu.
- <section>Tematyczna część dokumentu, zwykle z własnym nagłówkiem.
- <article>Samodzielna, zamknięta treść, którą można przeczytać i udostępnić osobno.
- <strong>Tekst o dużym znaczeniu: ostrzeżenie, kluczowa informacja.
Widzisz błąd albo brakuje przykładu? Napisz do nas.