---
title: display
slug: Web/CSS/display
tags:
  - CSS
  - 'CSS:Dokumentacje'
  - Dokumentacje
  - Wszystkie_kategorie
translation_of: Web/CSS/display
---
<p>{{ CSSRef() }}</p>

<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>

<p>Ta własność określa typ wyświetlania pudełka używanego dla elementu. W języku takim jak HTML, gdzie istniejące elementy mają dobrze określone zachowanie, domyślne wartości własności 'display' są brane z zachowań opisanych w specyfikacji HTML lub z domyślnego arkusza stylu przeglądarki/użytkownika. W językach, gdzie zachowanie 'display' nie jest zdefiniowane (jak XML), domyślną wartością jest 'inline'.</p>

<p>Oprócz wielu różnych dozwolonych typów wyświetlania pudełka, jedna wartość, "none", pozwala wyłączyć wyświetlanie elementu; wszystkie elementy potomne również mają wyłączone wyświetlanie. Dokument jest wyświetlany jak gdyby element nie istniał w drzewie dokumentu. Ta wartość daje potężne możliwości, ale powinna być używana z ostrożnością.</p>

<ul>
 <li>{{ Xref_cssinitial() }}: {{ Cssxref("inline") }}</li>
 <li>{{ Xref_cssinherited() }}: wszystkich elementów</li>
 <li>Dziedziczona: nie</li>
 <li>Procenty: niedostępne</li>
 <li>Media: {{ Xref_cssvisual() }}</li>
 <li>{{ Xref_csscomputed() }}: jako określone, z wyjątkiem elementu głównego, elementów <a href="pl/CSS/float">pływających</a> i elementów <a href="pl/CSS/position">pozycjonowanych absolutnie</a>.</li>
</ul>

<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3>

<p><code>display:</code> &lt;display-value&gt; | {{ Cssxref("inherit") }}</p>

<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3>

<dl>
 <dt>&lt;display-value&gt; </dt>
 <dd>Wartością 'display' może być jedna z poniższych wartości.</dd>
</dl>

<ul>
 <li><strong>inherit</strong> : Wyraźnie ustawia wartość tej własności na odpowiadającą rodzicowi.</li>
</ul>

<ul>
 <li><strong>none</strong> : Ta wartość wyłącza wyświetlanie elementu (nie ma efektu w układzie); wszystkie elementy potomne również mają bezwarunkowo wyłączone wyświetlanie. Dokument jest wyświetlany tak jakby element nie istniał w drzewie dokumentu. Aby wyświetlić rozmiary pudełka elementu w schemacie formatowania dokumentu, gdy jego zawartość powinna być niewidoczna, zobacz własność 'visibility'.</li>
</ul>

<ul>
 <li><strong>inline</strong> : Sprawia, że element generuje jedno lub więcej pudełek elementu liniowego.</li>
</ul>

<ul>
 <li><strong>block</strong> : Sprawia, że element generuje pudełko elementu blokowego.</li>
</ul>

<ul>
 <li><strong>inline-block</strong> : Wprowadzone w CSS2.1. Sprawia, że element generuje pudełko elementu blokowego, które będzie opływane otaczającą treścią, jakby było pojedynczym pudełkiem liniowym (zachowując się tak, jakby zachowywał się zamieniany element).</li>
</ul>

<ul>
 <li><strong>list-item</strong> : Sprawia, że element generuje pudełko blokowe dla zawartości oraz oddzielne pudełko liniowe pozycji listy.</li>
</ul>

<ul>
 <li><strong>compact</strong> : Zależnie od kontekstu ta wartość własności 'display' tworzy albo blokowe albo liniowe pudełko. W każdym przypadku odmienne własności CSS mogą stosować się do elementu 'compact'. W kontekście elementu blokowego element 'compact' jest wyświetlany w lewym lub prawym marginesie elementu blokowego. Element 'compact' bierze udział w wyliczaniu wysokości linii dla danej linii, a wartość własności 'vertical-align' jest relatywna do elementu blokowego.</li>
</ul>

<ul>
 <li><strong>run-in</strong> : Zależnie od kontekstu ta wartość własności 'display' tworzy albo liniowe albo blokowe pudełko. W każdym przypadku odmienne własności CSS mogą stosować się do elementu 'run-in'. Własności elementu 'run-in' są dziedziczone z jego rodzica w drzewie dokumentu, nie z pudełka elementu blokowego, w którym jest zawarty.</li>
</ul>

<ul>
 <li><strong>table-header-group|table-footer-group</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający mu element HTML THEAD i TFOOT, od którego wartości wzięły swoją nazwę.</li>
</ul>

<ul>
 <li><strong>table</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość ta jest odpowiednikiem elementu <code>table</code> w HTML.</li>
</ul>

<ul>
 <li><strong>inline-table</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li>
</ul>

<ul>
 <li><strong>table-caption</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li>
</ul>

<ul>
 <li><strong>table-cell</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li>
</ul>

<ul>
 <li><strong>table-row|table-row-group</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li>
</ul>

<ul>
 <li><strong>table-column|table-column-group</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li>
</ul>

<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3>

<p><a href="/samples/cssref/display.html">Zobacz przykład</a></p>

<pre>Ext/Doc: p  { display: block }
In-Line:  &lt;p STYLE="display: block"&gt;text&lt;/p&gt;
</pre>

<h3 id="Uwagi" name="Uwagi">Uwagi</h3>

<ul>
 <li>Zgodność z CSS1: przeglądarki mogą legalnie ignorować własność 'display' i zamiast tego używać domyślnych ustawień przeglądarki dla każdego elementu.</li>
 <li>W CSS1 domyślną wartością dla tej własności było "block". W CSS2 zostało to zmienione na "inline".</li>
</ul>

<h5 id="Elementy_blokowe_kontra_elementy_liniowe" name="Elementy_blokowe_kontra_elementy_liniowe">Elementy blokowe kontra elementy liniowe</h5>

<ul>
 <li><strong>Elementy blokowe</strong> tworzą odrębne w pionie bloki zawartości (w kontekście wizualnym) - generalnie używając przełamania linii przed zawartością i po niej. Tylko ta wartość dla 'display' jest dopuszczalna do tworzenia elementu pozycjonowanego. Zachowanie blokowe jest pokazywane przez takie elementy HTML jak BLOCKQUOTE (cytaty blokowe), DIV oraz nagłówki. Wartości własności 'display', tworzące blokowy typ elementu, to: 'block', 'list-item', 'table, 'compact' oraz 'run-in'.</li>
</ul>

<ul>
 <li><strong>Elementy liniowe</strong> nie tworzą wyraźnych bloków zawartości, zawartość elementu jest wyświetlana przy użyciu pudełka liniowego (zawartość jest rozmieszczana linia po linii wewnątrz zawierającego ją fizycznego lub wirtualnego elementu blokowego). Zachowanie liniowe jest pokazywane przez takie elementy HTML, jak fizyczne i wirtualne formatowanie znaków, nieopływane obrazki i nieobjęta znacznikami zawartość. Wartości własności 'display', tworzące liniowy typ elementu, to: 'inline', 'inline-table', 'compact' oraz 'run-in'.</li>
</ul>

<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/CSS1#display">CSS 1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">CSS 2.1</a></li>
</ul>

<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Browser</th>
   <th>Lowest Version</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Netscape</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Opera</td>
   <td>3.5</td>
  </tr>
 </tbody>
</table>

<p>Wartości <code>table-</code>* są wspierane w Firefoksie i ???.</p>

<p>Wartości <code>compact</code> oraz <code>run-in</code> nie są wspierane w Firefoksie. Wspierane są w ???.</p>

<p>Wartości <code>inline-block</code> oraz <code>inline-table</code> są wstępnie wspierane w Firefoksie 3 / Gecko 1.9. <code>inline-block</code> jest również wspierane w ???, a <code>inline-table</code> jest również wspieranie w ???.</p>

<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3>

<p>{{ Cssxref("visibility") }}, {{ Cssxref("float") }}, {{ Cssxref("position") }}</p>

<p> </p>

<div class="noinclude"> </div>

<p>{{ languages( { "en": "en/CSS/display", "es": "es/CSS/display", "fr": "fr/CSS/display", "pt": "pt/CSS/display", "zh-cn": "cn/CSS/display" } ) }}</p>