> For the complete documentation index, see [llms.txt](https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-6/elementy-liniowe-i-blokowe-oraz-wlasciwosc-display.md).

# 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.

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

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

[Edytuj na CodePen](http://codepen.io/theawwwesomes/pen/mEqRvk)

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`](https://developer.mozilla.org/en/docs/Web/CSS/vertical-align) zostało bardzo przejrzyście wytłumaczone w [artykule na BitsOfCo.de](https://bitsofco.de/the-vertical-align-property/).

```markup
<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>
```

```css
.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](http://codepen.io/theawwwesomes/pen/jAayJV)

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](http://www.impressivewebs.com/difference-block-inline-css/). 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](https://developer.mozilla.org/en-US/docs/Web/CSS/display) 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.

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

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

[Edytuj na CodePen](http://codepen.io/theawwwesomes/pen/qNVRvr)

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` |            ✔           |            ✔            |                    ✔                    |                    ✘                   |         ✔        |