Elementy liniowe i blokowe oraz właściwość display

W poprzednich rozdziałach poznaliście dwa generyczne tagi HTML: <div> oraz <span>. Zapewne udało się Wam już użyć ich w swoim kodzie. Skąd wzięła się potrzeba wprowadzania aż dwóch rodzajów domyślnych znaczników? Zostało to już krótko wspomniane: <div> odnosi się do elementów, które mają być wyświetlane jako blokowe, natomiast <span> zwykle jest używany dla elementów liniowych.

Elementy blokowe

Elementy blokowe to elementy, które mają być wyświetlane jako bloki.

• Jeśli nie określimy jego szerokości wprost, każdy blok domyślnie będzie zajmował 100% szerokości swojego rodzica.

• Możemy określić jego marginesy oraz wypełnienie (padding).

• Każdy element blokowy umieszczany jest pod poprzedzającym elementem, a element następny w kolejności również umieszczany jest pod spodem. Przypomina to złamanie linii w tekście.

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

.block {
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 5px;
  background: salmon;
}

Edytuj na CodePen

Przykładami elementów HTML, które przez przeglądarkę są domyślnie wyświetlane jako blokowe, to wspomniany już <div>, ale też <p>, <header>, <section>, <nav>, <footer>, <article>, <form>, <ul>, <ol> oraz nagłówki, np. <h1>.

Elementy liniowe

Elementy liniowe to takie, które zachowują się jak linie tekstu, czyli innymi słowy "płyną" razem z tekstem.

• Nie można określić im wymiarów za pomocą właściwości width i height.

• Nie można nadwać im górnych (margin-top), ani dolnych (margin-bottom) marginesów. Nadanie margin-left lub margin-right oraz wypełnień jednak w ich przypadku zadziała.

• Biorąc pod uwagę, że elementy liniowe zachowują się podobnie, jak linie tekstu, można określać ich wyrównanie w pionie za pomocą właściwości vertical-align. Zachowanie vertical-align zostało bardzo przejrzyście wytłumaczone w artykule na BitsOfCo.de.

<p>
  Hipster cornhole celiac kickstarter asymmetrical cred meggings.
  Retro pitchfork semiotics you
  <span class="inline">probably haven't heard of them</span>,
  thundercats occupy raw denim DIY.
</p>

.inline {
  padding: 5px;
  vertical-align: super;
  color: lightblue;
}

Hipster cornhole celiac kickstarter asymmetrical cred meggings. Retro pitchfork semiotics you probably haven't heard of them, thundercats occupy raw denim DIY.

Edytuj na CodePen

Przykładowe elementy liniowe, które już udało nam się poznać to <span> oraz <a>.

Warto w tym momencie wspomnieć, że istnieją elementy, których domyślne zachowanie nieco różni się od blokowych i liniowych. Można powiedzieć, że łączą w sobie ich wybrane cechy. Są to tzw. replaced elements. Należą do nich m.in. <img>, <input> oraz <select>. Można określać ich wymiary za pomocą właściwości CSS, jednak w przeciwieństwie do elementów blokowych za żadnym z nich nie następuje złamanie linii. Zauważyliście to z pewnością podczas tworzenia formularzy w czystym HTML.

Określamy zachowanie elementów za pomocą właściwości display

Każdy z elementów HTML posiada swój domyślny rodzaj zachowania, jednak można w bardzo łatwy sposób go zmienić i sprawić, żeby np. <div> zaczął zachowywać się jak element liniowy.

Jak to zrobić? Poznajmy właściwość display, która odpowiada za określanie rodzaju sposobu wyświetlania elementu na stronie. Wartości właściwości display jest bardzo dużo i sporo z nich brzmi tajemniczo nawet dla całkiem zaawansowanych deweloperów CSS.

Poznajmy cztery używane zdecydowanie najczęściej:

• display: none – za pomocą którego możemy ukryć nasz element.

• display: inline – sprawia, że element będzie wyświetlany jako element liniowy.

• display: block – element zostanie wyświetlony jako element blokowy.

• display: inline-block – łączy cechy elementów liniowych i blokowych. Za jego pomocą możemy sprawić, że będzie możliwe nadanie naszemu elementowi wymiarów i wszystkich marginesów, a także nie nastąpi po nim przejście do kolejnej linii.

<div class="container">
  <div class="inline-block-item"></div>
  <span class="inline-block-item"></span>
  <p class="inline-block-item"></p>
</div>

.inline-block-item {
  display: inline-block;
  width: 150px;
  height: 150px;
  margin: 5px 10px 6px 12px;
  background-color: lightblue;
}

Edytuj na CodePen

Poniżej podsumowujemy w tabeli cechy elementów liniowych, blokowych oraz liniowo-blokowych:

	Prawe i lewe marginesy	Górne i dolne marginesy	Możliwość ustawienia width i height	Wymuszenie złamania linii za elementem	vertical-align
inline	✔	✘	✘	✘	✔
block	✔	✔	✔	✔	✘
inline-block	✔	✔	✔	✘	✔