Autor publikacji: Virtual Patriot - Administrator

display

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Grudzień 28 2024

Zobacz również: w3.org - display property (LV3)

Przeznaczenie właściwości `display`

Za pomocą właściwości display możemy określić typ interesującego nas elementu HTML.

Typ elementu HTML ma wpływ między innymi na:

sposób układania się elementu HTML względem sąsiadujących elementów HTML lub tekstu
możliwość reagowania elementu HTML na poszczególne właściwości CSS

Typami elementu HTML, na które najczęściej natrafiamy są:

inline
block

Informacje dodatkowe: jeżeli decydujemy się zmienić domyślny typ interesującego nas elementu HTML, wtedy należy korzystać z następujących typów: inline, block, none, inline-block, table, inline-table, list-item, flex, inline-flex, grid, inline-grid. Każdy inny typ może powodować wystąpienie różnych niepożądanych efektów w różnych sytuacjach.

Informacje techniczne o właściwości `display`

przeznaczenie

element HTML każdego typu

dowolna

nie

wartość block wraz z właściwością display posiadają następujące elementy HTML: html, body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, header, footer, address, p, hr, pre, blockquote, ol, ul, dl, dt, dd, figure, figcaption, div, main, form, optgroup, option, fieldset
wartość none wraz z właściwością display posiadają następujące elementy HTML: head, title, base, link, meta, style, rp, param, audio (jeżeli element audio nie posiada atrybutu controls), source, track, area, datalist, script, noscript (jeżeli obsługa języka skryptów jest włączona w przeglądarce internetowej), template
wartość inline-block wraz z właściwością display posiadają następujące elementy HTML: img, iframe, embed, object, audio (jeżeli element audio posiada atrybut controls), video, input, button, select, textarea, progress, meter, legend, canvas
wartość list-item wraz z właściwością display posiadają następujące elementy HTML: li
wartość table wraz z właściwością display posiadają następujące elementy HTML: table
wartość table-caption wraz z właściwością display posiadają następujące elementy HTML: caption
wartość table-column-group wraz z właściwością display posiadają następujące elementy HTML: colgroup
wartość table-column wraz z właściwością display posiadają następujące elementy HTML: col
wartość table-header-group wraz z właściwością display posiadają następujące elementy HTML: thead
wartość table-row-group wraz z właściwością display posiadają następujące elementy HTML: tbody
wartość table-footer-group wraz z właściwością display posiadają następujące elementy HTML: tfoot
wartość table-row wraz z właściwością display posiadają następujące elementy HTML: tr
wartość table-cell wraz z właściwością display posiadają następujące elementy HTML: td, th
wartość ruby wraz z właściwością display posiadają następujące elementy HTML: ruby
wartość ruby-base wraz z właściwością display posiadają następujące elementy HTML: rb
wartość ruby-text wraz z właściwością display posiadają następujące elementy HTML: rt
wartość ruby-text-container wraz z właściwością display posiadają następujące elementy HTML: rtc

animowanie

tak (animacja schodkowa)

Interpretacja właściwości `display`

tak

Nie interpretuje wartości ruby, ruby-base, ruby-text oraz ruby-text-container.

tak

Nie interpretuje wartości ruby, ruby-base, ruby-text oraz ruby-text-container.

tak

Nie interpretuje wartości ruby, ruby-base, ruby-text oraz ruby-text-container.

tak

Interpretuje wartość table, inline-table, table-caption, table-column-group, table-column, table-header-group, table-row-group, table-footer-group, table-row oraz table-cell, lecz od wersji "8".

Nie interpretuje wartości flex, inline-flex, grid, inline-grid, ruby, ruby-base, ruby-text oraz ruby-text-container.

tak

Nie interpretuje wartości ruby, ruby-base, ruby-text oraz ruby-text-container.

Opis wartości właściwości `display`

inline

Wyjaśnienie

Wartość inline jest domyślną wartością właściwości display.

Wartość inline właściwości display sprawia, że element HTML staje się elementem HTML typu inline.

Główną rolą typu inline jest umożliwienie elementowi HTML występowanie na poziomie tekstu. Wspomnianą rolę posiadają również elementy HTML następującego typu: inline-block, inline-table, inline-flex, inline-grid, ruby, ruby-base, ruby-text lub ruby-text-container.

Cechy elementu HTML typu `inline`

sąsiadujące w kodzie HTML elementy HTML typu inline po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
element HTML typu inline jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu, dlatego element HTML typu inline układa się tak samo jak tekst elementu HTML
element HTML typu inline posiada tylko jeden wiersz na treść, lecz gdy jest to konieczne wspomniany wiersz może zostać przełamany do następnego wiersza elementu rodzica

Informacje dodatkowe

gdy element HTML posiadający właściwość display wraz z wartością inline posiada właściwość writing-mode wraz z wartością różną od wartości właściwości writing-mode najbliższego elementu przodka tworzącego blok treści, wtedy wartość inline właściwości display elementu HTML zachowuje cechy podobne do cech wartości inline-block

niezależnie od wyżej wymienionej reguły, gdy element HTML posiadający właściwość display wraz z wartością inline posiada pozycję absolute lub fixed, wtedy wartość inline właściwości display elementu HTML zachowuje cechy podobne do cech wartości block

Przykład

  display:inline;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

block

Wyjaśnienie

Za pomocą wartości block właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu block.

Główną rolą typu block jest umożliwienie elementowi HTML tworzenie bloku treści. Wspomnianą rolę posiadają również elementy HTML następującego typu: inline-block, list-item, table, inline-table, table-caption, table-header-group, table-row-group, table-footer-group, table-row, table-cell, flex, inline-flex, grid, inline-grid, jak również elementy dzieci elementu HTML typu flex, elementy dzieci elementu HTML typu inline-flex, elementy dzieci elementu HTML typu grid oraz elementy dzieci elementu HTML typu inline-grid.

Cechy elementu HTML typu `block`

kolejno występujące w kodzie HTML elementy HTML typu block po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
element HTML typu block tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Przykład

  display:block;

przykładowy tekst przed elementem "span" przykładowy tekst w elemencie "span" przykładowy tekst pomiędzy elementami "span" ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "span" wyłącznie w celach prezentacyjnych przykładowy tekst po elemencie "span"

Przykładowe elementy "span" stały się elementami HTML typu "block", ponieważ do wspomnianych elementów "span" została dodana właściwość "display" wraz z wartością "block".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      span {
        display:block;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "span"
    <span>przykładowy tekst w elemencie "span"</span>
    przykładowy tekst pomiędzy elementami "span"
    <span>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "span" wyłącznie w celach prezentacyjnych</span>
    przykładowy tekst po elemencie "span"

  </body>
</html>

none

Wyjaśnienie

Za pomocą wartości none właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu none. Element HTML typu none istnieje w kodzie HTML, lecz element HTML typu none nie jest wyświetlany w oknie przeglądarki internetowej.

Przykład

  display:none;

przykładowy tekst przed elementem "div" przykładowy tekst pomiędzy elementami "div" przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "none", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "none".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:none;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

inline-block

Wyjaśnienie

Za pomocą wartości inline-block właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu inline-block.

Cechy elementu HTML typu `inline-block`

sąsiadujące w kodzie HTML elementy HTML typu inline-block po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
element HTML typu inline-block tworzy występujący na poziomie tekstu blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Przykład

  display:inline-block;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline-block", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline-block".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline-block;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

list-item

Wyjaśnienie

Za pomocą wartości list-item właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu list-item.

Cechy elementu HTML typu `list-item`

kolejno występujące w kodzie HTML elementy HTML typu list-item po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
element HTML typu list-item tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią
unikatowymi właściwościami CSS dla elementu HTML typu list-item są następujące właściwości CSS: list-style-type, list-style-position, list-style-image, list-style

Pierwotnym elementem HTML typu list-item jest element li.

<ol>
  <li><!-- pierwotny element HTML typu LIST-ITEM -->
    pierwszy przedmiot listy HTML
  </li>

  <li><!-- pierwotny element HTML typu LIST-ITEM -->
    drugi przedmiot listy HTML
  </li>

  <li><!-- pierwotny element HTML typu LIST-ITEM -->
    trzeci przedmiot listy HTML
  </li>
</ol>

Przykład

  display:list-item;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "list-item", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "list-item".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:list-item;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table

Wyjaśnienie

Za pomocą wartości table właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table.

Cechy elementu HTML typu `table`

kolejno występujące w kodzie HTML elementy HTML typu table po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
element HTML typu table tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią
unikatowymi właściwościami CSS dla elementu HTML typu table są następujące właściwości CSS: border-collapse, border-spacing, table-layout

Pierwotnym elementem HTML typu table jest element table.

<table><!-- pierwotny element HTML typu TABLE -->
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

inline-table

Wyjaśnienie

Za pomocą wartości inline-table właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu inline-table.

Cechy elementu HTML typu `inline-table`

sąsiadujące w kodzie HTML elementy HTML typu inline-table po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
element HTML typu inline-table tworzy występujący na poziomie tekstu blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią
unikatowymi właściwościami CSS dla elementu HTML typu inline-table są następujące właściwości CSS: border-collapse, border-spacing, table-layout

Przykład

  display:inline-table;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline-table", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline-table".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline-table;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-caption

Wyjaśnienie

Za pomocą wartości table-caption właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-caption.

Cechy elementu HTML typu `table-caption`

kolejno występujące w kodzie HTML elementy HTML typu table-caption po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
element HTML typu table-caption tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią
unikatową właściwością CSS dla elementu HTML typu table-caption jest właściwość caption-side

Pierwotnym elementem HTML typu table-caption jest element caption.

<table>
  <caption><!-- pierwotny element HTML typu CAPTION -->
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-caption;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-caption", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-caption".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-caption;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-column-group

Wyjaśnienie

Za pomocą wartości table-column-group właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-column-group. Element HTML typu table-column-group istnieje w kodzie HTML, lecz element HTML typu table-column-group nie jest wyświetlany w oknie przeglądarki internetowej.

Cechy elementu HTML typu `table-column-group`

mimo że element HTML typu table-column-group nie jest wyświetlany w oknie przeglądarki internetowej, element HTML typu table-column-group oddziela w pionie sąsiednie treści od siebie

Pierwotnym elementem HTML typu table-column-group jest element colgroup.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup><!-- pierwotny element HTML typu TABLE-COLUMN-GROUP -->
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-column-group;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-column-group", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-column-group".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-column-group;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-column

Wyjaśnienie

Za pomocą wartości table-column właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-column. Element HTML typu table-column istnieje w kodzie HTML, lecz element HTML typu table-column nie jest wyświetlany w oknie przeglądarki internetowej.

Cechy elementu HTML typu `table-column`

mimo że element HTML typu table-column nie jest wyświetlany w oknie przeglądarki internetowej, element HTML typu table-column oddziela w pionie sąsiednie treści od siebie

Pierwotnym elementem HTML typu table-column jest element col.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col><!-- pierwotny element HTML typu TABLE-COLUMN -->
    <col><!-- pierwotny element HTML typu TABLE-COLUMN -->
    <col><!-- pierwotny element HTML typu TABLE-COLUMN -->
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-column;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-column", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-column".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-column;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-header-group

Wyjaśnienie

Za pomocą wartości table-header-group właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-header-group.

Cechy elementu HTML typu `table-header-group`

kolejno występujące w kodzie HTML elementy HTML typu table-header-group po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
element HTML typu table-header-group tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table-header-group jest element thead.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead><!-- pierwotny element HTML typu TABLE-HEADER-GROUP -->
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-header-group;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-header-group", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-header-group".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-header-group;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-row-group

Wyjaśnienie

Za pomocą wartości table-row-group właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-row-group.

Cechy elementu HTML typu `table-row-group`

kolejno występujące w kodzie HTML elementy HTML typu table-row-group po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
element HTML typu table-row-group tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table-row-group jest element tbody.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody><!-- pierwotny element HTML typu TABLE-ROW-GROUP -->
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-row-group;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-row-group", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-row-group".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-row-group;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-footer-group

Wyjaśnienie

Za pomocą wartości table-footer-group właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-footer-group.

Cechy elementu HTML typu `table-footer-group`

kolejno występujące w kodzie HTML elementy HTML typu table-footer-group po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
element HTML typu table-footer-group tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table-footer-group jest element tfoot.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot><!-- pierwotny element HTML typu TABLE-FOOTER-GROUP -->
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-footer-group;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-footer-group", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-footer-group".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-footer-group;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-row

Wyjaśnienie

Za pomocą wartości table-row właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-row.

Cechy elementu HTML typu `table-row`

kolejno występujące w kodzie HTML elementy HTML typu table-row po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
element HTML typu table-row tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table-row jest element tr.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr><!-- pierwotny element HTML typu TABLE-ROW -->
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr><!-- pierwotny element HTML typu TABLE-ROW -->
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr><!-- pierwotny element HTML typu TABLE-ROW -->
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-row;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-row", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-row".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-row;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-cell

Wyjaśnienie

Za pomocą wartości table-cell właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-cell.

Cechy elementu HTML typu `table-cell`

sąsiadujące w kodzie HTML elementy HTML typu table-cell po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
element HTML typu table-cell tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią
unikatową właściwością CSS dla elementu HTML typu table-cell jest właściwość empty-cells

Pierwotnym elementem HTML typu table-cell jest element th oraz element td.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th><!-- pierwotny element HTML typu TABLE-CELL -->
      <th>komórka - 2</th><!-- pierwotny element HTML typu TABLE-CELL -->
      <th>komórka - 3</th><!-- pierwotny element HTML typu TABLE-CELL -->
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td><!-- pierwotny element HTML typu TABLE-CELL -->
      <td>komórka - 5</td><!-- pierwotny element HTML typu TABLE-CELL -->
      <td>komórka - 6</td><!-- pierwotny element HTML typu TABLE-CELL -->
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td><!-- pierwotny element HTML typu TABLE-CELL -->
      <td>komórka - 8</td><!-- pierwotny element HTML typu TABLE-CELL -->
      <td>komórka - 9</td><!-- pierwotny element HTML typu TABLE-CELL -->
    </tr>
  </tfoot>
</table>

Przykład

  display:table-cell;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-cell", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-cell".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-cell;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

flex

Wyjaśnienie

Za pomocą wartości flex właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu flex.

Cechy elementu HTML typu `flex`

kolejno występujące w kodzie HTML elementy HTML typu flex po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
element HTML typu flex tworzy blok treści, który domyślnie może składać się wyłącznie z jednego wiersza wypełnionego treścią, który dodatkowo nie może zostać przełamany
unikatowymi właściwościami CSS dla elementu HTML typu flex są następujące właściwości CSS: flex-direction, flex-wrap, flex-flow

Cechy elementów dzieci elementu HTML typu `flex`

elementy dzieci elementu HTML typu flex zachowują cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element dziecko
domyślnie elementy dzieci elementu HTML typu flex po wyświetleniu w oknie przeglądarki internetowej układają się w jednym wierszu jeden obok drugiego
unikatowymi właściwościami CSS dla elementów dzieci elementu HTML typu flex są następujące właściwości CSS: flex-grow, flex-shrink, flex-basis, flex

Przykład

  display:flex;

przykładowy tekst przed elementem "div"

span - 1 span - 2 span - 3

przykładowy tekst pomiędzy elementami "div"

span - 1 span - 2 span - 3

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "flex", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "flex".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:flex;
        background-color:#7DCDE8;
      }

      .dziecko-1 {
        background-color:orange;
      }

      .dziecko-2 {
        background-color:gold;
      }

      .dziecko-3 {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
    </div>
    przykładowy tekst pomiędzy elementami "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
    </div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

inline-flex

Wyjaśnienie

Za pomocą wartości inline-flex właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu inline-flex.

Cechy elementu HTML typu `inline-flex`

sąsiadujące w kodzie HTML elementy HTML typu inline-flex po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
element HTML typu inline-flex tworzy występujący na poziomie tekstu blok treści, który domyślnie może składać się wyłącznie z jednego wiersza wypełnionego treścią, który dodatkowo nie może zostać przełamany
unikatowymi właściwościami CSS dla elementu HTML typu inline-flex są następujące właściwości CSS: flex-direction, flex-wrap, flex-flow

Cechy elementów dzieci elementu HTML typu `inline-flex`

elementy dzieci elementu HTML typu inline-flex zachowują cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element dziecko
domyślnie elementy dzieci elementu HTML typu inline-flex po wyświetleniu w oknie przeglądarki internetowej układają się w jednym wierszu jeden obok drugiego
unikatowymi właściwościami CSS dla elementów dzieci elementu HTML typu inline-flex są następujące właściwości CSS: flex-grow, flex-shrink, flex-basis, flex

Przykład

  display:inline-flex;

przykładowy tekst przed elementem "div"

span - 1 span - 2 span - 3

przykładowy tekst pomiędzy elementami "div"

span - 1 span - 2 span - 3

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline-flex", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline-flex".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline-flex;
        background-color:#7DCDE8;
      }

      .dziecko-1 {
        background-color:orange;
      }

      .dziecko-2 {
        background-color:gold;
      }

      .dziecko-3 {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
    </div>
    przykładowy tekst pomiędzy elementami "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
    </div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

grid

Wyjaśnienie

Za pomocą wartości grid właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu grid.

Cechy elementu HTML typu `grid`

kolejno występujące w kodzie HTML elementy HTML typu grid po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
element HTML typu grid tworzy blok treści, wewnątrz którego znajduje się siatka na treść, zbudowana z określonej liczby wierszy, kolumn oraz komórek
unikatowymi właściwościami CSS dla elementu HTML typu grid są następujące właściwości CSS: grid-template-rows, grid-template-columns, grid-template-areas, grid-template, grid-auto-rows, grid-auto-columns, grid-auto-flow, grid, grid-row-gap, grid-column-gap, grid-gap

Cechy elementów dzieci elementu HTML typu `grid`

elementy dzieci elementu HTML typu grid zachowują cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element dziecko
domyślnie elementy dzieci elementu HTML typu grid po wyświetleniu w oknie przeglądarki internetowej układają się jeden po drugim w kolejnych komórkach wierszy siatki
unikatowymi właściwościami CSS dla elementów dzieci elementu HTML typu grid są następujące właściwości CSS: grid-row-start, grid-row-end, grid-column-start, grid-column-end, grid-row, grid-column, grid-area

Przykład

  display:grid;

przykładowy tekst przed elementem "div"

span - 1 span - 2 span - 3 span - 4 span - 5 span - 6 span - 7

przykładowy tekst pomiędzy elementami "div"

span - 1 span - 2 span - 3 span - 4 span - 5 span - 6 span - 7

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "grid", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "grid".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:grid;
        grid-template-rows:75px 75px 75px;
        grid-template-columns:75px 75px 75px;
        background-color:#7DCDE8;
      }

      .dziecko-1 {
        background-color:orange;
      }

      .dziecko-2 {
        background-color:gold;
      }

      .dziecko-3 {
        background-color:yellow;
      }

      .dziecko-4 {
        background-color:pink;
      }

      .dziecko-5 {
        background-color:red;
      }

      .dziecko-6 {
        background-color:lime;
      }

      .dziecko-7 {
        background-color:fuchsia;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
      <span class="dziecko-4">span - 4</span>
      <span class="dziecko-5">span - 5</span>
      <span class="dziecko-6">span - 6</span>
      <span class="dziecko-7">span - 7</span>
    </div>
    przykładowy tekst pomiędzy elementami "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
      <span class="dziecko-4">span - 4</span>
      <span class="dziecko-5">span - 5</span>
      <span class="dziecko-6">span - 6</span>
      <span class="dziecko-7">span - 7</span>
    </div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

inline-grid

Wyjaśnienie

Za pomocą wartości inline-grid właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu inline-grid.

Cechy elementu HTML typu `inline-grid`

kolejno występujące w kodzie HTML elementy HTML typu inline-grid po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
element HTML typu inline-grid tworzy występujący na poziomie tekstu blok treści, wewnątrz którego znajduje się siatka na treść, zbudowana z określonej liczby wierszy, kolumn oraz komórek
unikatowymi właściwościami CSS dla elementu HTML typu inline-grid są następujące właściwości CSS: grid-template-rows, grid-template-columns, grid-template-areas, grid-template, grid-auto-rows, grid-auto-columns, grid-auto-flow, grid, grid-row-gap, grid-column-gap, grid-gap

Cechy elementów dzieci elementu HTML typu `inline-grid`

elementy dzieci elementu HTML typu inline-grid zachowują cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element dziecko
domyślnie elementy dzieci elementu HTML typu inline-grid po wyświetleniu w oknie przeglądarki internetowej układają się jeden po drugim w kolejnych komórkach wierszy siatki
unikatowymi właściwościami CSS dla elementów dzieci elementu HTML typu inline-grid są następujące właściwości CSS: grid-row-start, grid-row-end, grid-column-start, grid-column-end, grid-row, grid-column, grid-area

Przykład

  display:inline-grid;

przykładowy tekst przed elementem "div"

span - 1 span - 2 span - 3 span - 4 span - 5 span - 6 span - 7

przykładowy tekst pomiędzy elementami "div"

span - 1 span - 2 span - 3 span - 4 span - 5 span - 6 span - 7

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline-grid", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline-grid".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline-grid;
        grid-template-rows:60px 60px 60px;
        grid-template-columns:60px 60px 60px;
        background-color:#7DCDE8;
      }

      .dziecko-1 {
        background-color:orange;
      }

      .dziecko-2 {
        background-color:gold;
      }

      .dziecko-3 {
        background-color:yellow;
      }

      .dziecko-4 {
        background-color:pink;
      }

      .dziecko-5 {
        background-color:red;
      }

      .dziecko-6 {
        background-color:lime;
      }

      .dziecko-7 {
        background-color:fuchsia;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
      <span class="dziecko-4">span - 4</span>
      <span class="dziecko-5">span - 5</span>
      <span class="dziecko-6">span - 6</span>
      <span class="dziecko-7">span - 7</span>
    </div>
    przykładowy tekst pomiędzy elementami "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
      <span class="dziecko-4">span - 4</span>
      <span class="dziecko-5">span - 5</span>
      <span class="dziecko-6">span - 6</span>
      <span class="dziecko-7">span - 7</span>
    </div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

ruby

Wyjaśnienie

Za pomocą wartości ruby właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu ruby.

Cechy elementu HTML typu `ruby`

sąsiadujące w kodzie HTML elementy HTML typu ruby po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
element HTML typu ruby jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu, dlatego element HTML typu ruby układa się tak samo jak tekst elementu HTML
element HTML typu ruby posiada tylko jeden wiersz na treść, który dodatkowo nie może zostać przełamany

Pierwotnym elementem HTML typu ruby jest element ruby.

<ruby><!-- pierwotny element HTML typu RUBY -->
  <rb>日本語</rb>
  <rt>nihongo</rt>
  <rtc>Japanese</rtc>
</ruby>

Przykład

  display:ruby;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "ruby", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "ruby".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:ruby;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

ruby-base

Wyjaśnienie

Za pomocą wartości ruby-base właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu ruby-base.

Cechy elementu HTML typu `ruby-base`

sąsiadujące w kodzie HTML elementy HTML typu ruby-base po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
element HTML typu ruby-base jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu, dlatego element HTML typu ruby-base układa się tak samo jak tekst elementu HTML
element HTML typu ruby-base posiada tylko jeden wiersz na treść, który dodatkowo nie może zostać przełamany

Pierwotnym elementem HTML typu ruby-base jest element rb.

<ruby>
  <rb>日本語</rb><!-- pierwotny element HTML typu RUBY-BASE -->
  <rt>nihongo</rt>
  <rtc>Japanese</rtc>
</ruby>

Przykład

  display:ruby-base;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "ruby-base", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "ruby-base".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:ruby-base;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

ruby-text

Wyjaśnienie

Za pomocą wartości ruby-text właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu ruby-text.

Cechy elementu HTML typu `ruby-text`

sąsiadujące w kodzie HTML elementy HTML typu ruby-text po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
element HTML typu ruby-text układa się nad sąsiadującym tekstem oraz ewentualnie nad sąsiadującym przed danym elementem HTML typu ruby-text elementem HTML typu ruby-text-container
element HTML typu ruby-text jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu
element HTML typu ruby-text posiada tylko jeden wiersz na treść, który dodatkowo nie może zostać przełamany

Pierwotnym elementem HTML typu ruby-text jest element rt.

<ruby>
  <rb>日本語</rb>
  <rt>nihongo</rt><!-- pierwotny element HTML typu RUBY-TEXT -->
  <rtc>Japanese</rtc>
</ruby>

Przykład

  display:ruby-text;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "ruby-text", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "ruby-text".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:ruby-text;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

ruby-text-container

Wyjaśnienie

Za pomocą wartości ruby-text-container właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu ruby-text-container.

Cechy elementu HTML typu `ruby-text-container`

sąsiadujące w kodzie HTML elementy HTML typu ruby-text-container po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
element HTML typu ruby-text-container jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu
element HTML typu ruby-text-container układa się nad sąsiadującym tekstem oraz ewentualnie nad sąsiadującym przed danym elementem HTML typu ruby-text-container elementem HTML typu ruby-text
element HTML typu ruby-text-container posiada tylko jeden wiersz na treść, który dodatkowo nie może zostać przełamany

Pierwotnym elementem HTML typu ruby-text-container jest element rtc.

<ruby>
  <rb>日本語</rb>
  <rt>nihongo</rt>
  <rtc>Japanese</rtc><!-- pierwotny element HTML typu RUBY-TEXT-CONTAINER -->
</ruby>

Przykład

  display:ruby-text-container;

przykładowy tekst przed elementem "div"

przykładowy tekst w elemencie "div"

przykładowy tekst pomiędzy elementami "div"

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "ruby-text-container", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "ruby-text-container".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:ruby-text-container;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>