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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET 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?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.