Różnica między <div> a <span>

Rozdział 10

W poprzednim rozdziale wszystkie elementy wyświetliły się w tej samej linijce, jeden za drugim. Dzieje się tak dlatego, że <label>, <input> i <textarea> są tzw. elementami liniowo-blokowymi. Zachowują się one jak zwykły tekst i cokolwiek byś w nich nie umieścił, wyświetlone zostaną obok siebie. Różnią się od pozostałych tym, że możesz nadać im w CSS różne wymiary (dlatego też jeden z członów tej nazwy brzmi "blokowe").

Zastanówmy się, jak możemy rozwiązać problem elementów formularza wyświetlających się obok siebie. Przydałby się jakiś tag, który powiedziałby przeglądarce: "hej, jestem pojemnikiem, który zawiera kilka tagów.". Takim swoistym kontenerem na inne elementy, który przy okazji wprowadzi "złamanie treści" do nowej linii, jest tag <div>.

Aby uzmysłowić sobie, czym są elementy <div>, użyjmy w naszym kodzie trzech divów i nadajmy im szerokość, wysokość oraz tło. HTML spełniający te założenia będzie wyglądał tak:

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

W CSS natomiast napiszemy tak, odnosząc się do klasy "container":

.container {
  width: 200px;
  height: 200px;
  background-color: blue;
}

Jak widzisz, dodałem dla wszystkich elementów z klasą container szerokość 200px, taką samą wysokość i kolor tła "blue". Sprawdźmy, jak to wygląda w przeglądarce:

Jak widać, jest to jedna, niebieska masa. Odzielmy więc od siebie każdy z elementów o 10px:

.container {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin-bottom: 10px;
}

Aby dodać przerwę w pionie między elementami użyłem właściwości margin-bottom. Sprawdźmy, jak wygląda to teraz:

Widać teraz wyraźnie, że przeglądarka wyświetla elementy <div> jeden pod drugim, w przeciwieństwie do elementów formularza, które pojawiły się jednej linii.

Skąd taka różnica? Otóż jeśli chodzi o wyświetlanie tagów, przeglądarka rozróżnia trzy grupy elementów:

liniowe
blokowe
liniowo-blokowe

Najprościej uzmysłowić sobie, że nazwy tych grup nie są przypadkowe i tak: elementy liniowe nie spowodują przejścia do nowej linii, będą wyświetlać się obok siebie, w jednej... linii. Blokowe z kolei będą zachowywać się jak pudełka, które ustawiasz jeden pod drugim, a więc nigdy nie wyświetlą się obok siebie, chyba że użyjesz magicznych sztuczek w CSS, o których dowiesz się w następnym rozdziale. Liniowo-blokowe z kolei będą zachowywać się jak liniowe, jeśli chodzi o położenie (a więc wyświetlać będą się obok siebie), natomiast różnią się od nich tym, że możesz nadać im różne wielkości. Ma to sens, np. <textarea> wyświetla się jako duży prostokąt i zdecydowanie "wychodzi" poza pojedynczą linijkę tekstu.

Podam Ci teraz kilka przykładów elementów wraz z ich kwalifikacją do każdej z tych grup:

liniowe – <span>, <em>, <strong>
blokowe – <div>, <p>, <article>
liniowo-blokowe – <input>, <textarea>

Domyślnie, elementom liniowym przeglądarka ustawia właściwość "display" na "inline". Blokowym na "block", a liniowo blokowym na "inline-block". Na przykład tag <span> nie spowoduje przejścia tekstu do nowej linii, bo jest elementem liniowym i przeglądarka z automatu nadaje mu styl display na inline:

<span>raz</span> <span>dwa</span> <span>trzy</span>

Przeglądarka wyświetli więc tekst "raz dwa trzy" w jednej linii:

raz dwa trzy

Możliwa jest jednak zmiana sposobu wyświetlania danych tagów. Gdybyśmy zapragnęli, aby każdy <span> zachowywał się jak element blokowy, a więc powodował przejście do nowej linii, moglibyśmy napisać w CSS tak:

span {
  display: block;
}

Wtedy nasz przykład wyświetlałby się następująco:

raz

dwa

trzy

Wracając do problemu z formularzem, spośród elementów blokowych wybrałem <div>. Zapytasz zapewne, czy nie zburzy to semantycznego sensu o jaki dbamy od początku tej książki. Drugie pytanie, które trzymasz jako as w rękawie z pewnością dotyczy tego, co tak naprawdę ten tag oznacza. Z rozbrajającą szczerością odpowiadam, że... nic. Stosujemy go w wypadkach, kiedy spośród wszystkich innych tagów nie znajdujemy zastosowania dla tego, co chcemy w dokumencie umieścić. Utarło się więc, że <div>, najczęściej w parze z klasami, stosujemy do uzyskania różnych efektów wizualnych, skoro nie pełni on żadnej funkcji w opisywaniu treści. Na przykład kiedy chcemy zrobić trzy kolumny na naszej stronie, czy też w przypadku, który rozważamy – kiedy poszukujemy elementu, który rozdzieli kilka elementów liniowych lub liniowo-blokowych. Mimo wszystko staraj się nie nadużywać tego elementu – w pierwszej kolejnosci poszukaj tagów, które będą odpowiadać funkcji danego tekstu w dokumencie.

Bogatsi o wiedzę na temat elementów blokowych, spróbujmy uzupełnić kod naszego formularza w ten sposób, by pola formularza i ich opisy wyświetlane były jeden pod drugim:

<form>
  <div>
    <label for="nickname">Twój nick:</label>
  </div>
  <div>
    <input type="text" id="nickname" name="nickname">
  </div>
  <div>
    <label for="user-email">Twój e-mail:</label>
  </div>
  <div>
    <input type="email" id="user-email" name="user-email">
  </div>
  <div>
    <label for="content">Treść:</label>
  </div>
  <div>
    <textarea rows="10" cols="50" id="content" name="content"></textarea>
  </div>
  <div>
    <input type="submit" value="dodaj">
  </div>
</form>

Wygląda to nieco bardziej skomplikowanie, ale tak naprawdę jedyne co zrobiliśmy, to dodaliśmy tagi <div> wokół każdego z elementów formularza.

Kolejny raz spójrz na porównanie poprzedniego kodu z nowym:

A teraz zobacz, jak to się wyświetla w przeglądarce!

Wygląda na to, że właśnie spełniliśmy założenia tego zadania, brawo!