---
title: display
slug: Web/CSS/display
tags:
  - CSS
  - CSS özelliği
  - Referans
translation_of: Web/CSS/display
---
<div>{{CSSRef}}</div>

<h2 id="Özet">Özet</h2>

<p><strong><code>display</code> </strong>özelliği, bir eleman için kullanılan kutu görüntüleme türünü belirler. HTML'de, varsayılan <code>display</code> değeri, daha önceden belirlenmiş HTML spesifikasyonlarından ya da tarayıcı/kullanıcı varsayılan stil şablonundan alınır. XML'de varsayılan <code>display</code> değeri <code>inline</code>'dır.</p>

<p>Bir çok farklı kutu görüntüleme tipi olmasıyla birlikte, <code>none </code>değeri bir elementi görüntülemeye kapatır, bu değeri kullandığınızda, bütün alt elemanlar da görüntülenmezler. Belge, o eleman yokmuş gibi görüntülenir.</p>

<p>{{cssinfo}}</p>

<h2 id="Sözdizimi_kuralları">Sözdizimi kuralları</h2>

<pre class="brush:css">display: none;
display: inline;
display: block;
display: inline-block;
display: contents;
display: list-item;
display: inline-list-item;
display: table;
display: inline-table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: table-caption;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
display: run-in;

/* Global values */
display: inherit;
display: initial;
display: unset;
</pre>

<h3 id="Değerler">Değerler</h3>

<p><em><strong>display-value </strong></em>bir elementin görüntülenme biçimini tanımlamak için kullanılan bir değerdir.</p>

<dl>
 <dd>
 <table class="standard-table">
  <thead>
   <tr>
    <td class="header" colspan="1">Değer kümesi</td>
    <td class="header">Değer</td>
    <td class="header">Tanım</td>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td colspan="1" rowspan="4">Basic values (CSS 1)</td>
    <td><code>none</code></td>
    <td>
     <p>Elementi görüntülemeye kapatır.(Tasarım değişikliğe uğramaz.);bütün alt elementler de görüntülenmez. Belge, bu element yokmuş gibi davranır.</p>

     <p>Görüntülemeye kapadığınız elementin kutu boyutlarının halen tasarımda var olmasını istiyorsanız {{cssxref("visibility")}} özelliğine gözatın.</p>
    </td>
   </tr>
   <tr>
    <td><code>inline</code></td>
    <td>bir veya daha fazla satıriçi kutusu oluşturur.</td>
   </tr>
   <tr>
    <td><code>block</code></td>
    <td>blok element kutusu oluşturur.</td>
   </tr>
   <tr>
    <td><code>list-item</code></td>
    <td>Element içerik için bir blok kutusu oluşturur, ve içeriği listeye ayırır.</td>
   </tr>
   <tr>
    <td>Gelişletilmiş değerler (CSS 2.1)</td>
    <td><code>inline-block</code></td>
    <td>inline-block değeri, kendisini çevreleyen bir block element alanı oluşturur.</td>
   </tr>
   <tr>
    <td colspan="1" rowspan="10">Table model değerler (CSS 2.1)</td>
    <td><code>inline-table</code></td>
    <td><code>inline-table  </code>değeri HTML üzerinde direkt olarak bir mapping'e sahip değildir.  {{HTMLElement("table")}} HTML elementi gibi davranır ancak farklı olarak, block elementi değil, inline-block özelliklerini taşır.</td>
   </tr>
   <tr>
    <td><code>table</code></td>
    <td>Bu elementler block {{HTMLElement("table")}} gibi davranır.</td>
   </tr>
   <tr>
    <td><code>table-caption</code></td>
    <td>Bu elementler {{HTMLElement("caption")}} HTML elementler gibi davranır.</td>
   </tr>
   <tr>
    <td><code>table-cell</code></td>
    <td>Bu elementler {{HTMLElement("td")}} gibi davranır..</td>
   </tr>
   <tr>
    <td><code>table-column</code></td>
    <td>Bu elementler {{HTMLElement("col")}} gibi davranır.</td>
   </tr>
   <tr>
    <td><code>table-column-group</code></td>
    <td>Bu elementler {{HTMLElement("colgroup")}} gibi davranır.</td>
   </tr>
   <tr>
    <td><code>table-footer-group</code></td>
    <td>Bu elementler {{HTMLElement("tfoot")}} gibi davranır.</td>
   </tr>
   <tr>
    <td><code>table-header-group</code></td>
    <td>Bu elementler {{HTMLElement("thead")}} gibi davranır.</td>
   </tr>
   <tr>
    <td><code>table-row</code></td>
    <td>Bu elementler {{HTMLElement("tr")}} gibi davranır.</td>
   </tr>
   <tr>
    <td><code>table-row-group</code></td>
    <td>Bu elementler {{HTMLElement("tbody")}} gibi davranır.</td>
   </tr>
   <tr>
    <td colspan="1">CSS3 liste değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td>
    <td><a href="https://drafts.csswg.org/css-lists/#valdef-display-inline-list-item">inline-list-item</a></td>
    <td>The inline-list-item display value makes the element a list item, with the effects described above. Additionally, the outside value of list-style-position computes to inside on this element. Otherwise, this display value is treated identically to inline.</td>
   </tr>
   <tr>
    <td colspan="1" rowspan="2">Flexbox model değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td>
    <td><code>flex</code></td>
    <td>Element, block elementi gibi davranır ve flexbox modeline uygun olarak görünür.</td>
   </tr>
   <tr>
    <td><code>inline-flex</code></td>
    <td>Element inline element gibi davranır ve flexbox modeline uygun olarak görünür.</td>
   </tr>
   <tr>
    <td colspan="1" rowspan="2">Grid box model değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>) {{experimental_inline}}</td>
    <td><code>grid</code></td>
    <td>
     <p>Element, block elementi gibi davranır ve<br>
      grid modeline uygun olarak görünür.</p>

     <div class="note">Deneyimlenebileceği üzere, <a href="/en-US/docs/CSS/display#Browser_Compatibility" title="https://developer.mozilla.org/en/CSS/display#Browser_Compatibility">çoğu tarayıcı henüz desteklememektedir</a>. Özellikle <code>-moz-grid</code> 'in display:grid'e ait bir prefix olmadığını belirtmeliyiz. -moz-grid <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=616605#c10" title="https://bugzilla.mozilla.org/show_bug.cgi?id=616605#c10">XUL layout model</a> 'de belirtilen ve kullanmamanız gereken bir prefix'tir.</div>
    </td>
   </tr>
   <tr>
    <td><code>inline-grid</code></td>
    <td>Element inline element gibi davranır ve grid modeline bağlı olarak içeriği kapsar.</td>
   </tr>
   <tr>
    <td colspan="1" rowspan="5">Ruby formatting model values (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>){{experimental_inline}}</td>
    <td><code>ruby</code></td>
    <td>Element inline element gibi davranır ve<br>
     içeriği ruby format modelinde kapsar {{HTMLElement("ruby")}} gibi davranır.</td>
   </tr>
   <tr>
    <td><code>ruby-base</code></td>
    <td>Bu elementler {{HTMLElement("rb")}} gibi davranır.</td>
   </tr>
   <tr>
    <td><code>ruby-text</code></td>
    <td>Bu elementler {{HTMLElement("rt")}} gibi davranır</td>
   </tr>
   <tr>
    <td><code>ruby-base-container</code></td>
    <td>These elements behave like {{HTMLElement("rbc")}} elements generated as anonymous boxes.</td>
   </tr>
   <tr>
    <td><code>ruby-text-container</code></td>
    <td>These elements behave like {{HTMLElement("rtc")}} elements.</td>
   </tr>
   <tr>
    <td colspan="1" rowspan="2">Experimental values {{experimental_inline}}</td>
    <td><code>run-in</code></td>
    <td>
     <ul>
      <li>If the run-in box contains a block box, same as block.</li>
      <li>If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.</li>
      <li>If an inline box follows, the run-in box becomes a block box.</li>
     </ul>
    </td>
   </tr>
   <tr>
    <td><code>contents</code></td>
    <td>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Examples">Examples</h2>

<p><a href="/samples/cssref/display.html">View Live Examples</a></p>

<pre class="brush: css">p.secret  { display: none }
&lt;p style="display:none"&gt; invisible text &lt;/p&gt;
</pre>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Lists', '#valdef-display-inline-list-item', 'display')}}</td>
   <td>{{Spec2('CSS3 Lists')}}</td>
   <td>Added the inline-list-item values.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td>
   <td>{{Spec2('CSS3 Display')}}</td>
   <td>Added the <code>run-in</code> and <code>contents</code> values.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td>
   <td>{{Spec2('CSS3 Ruby')}}</td>
   <td>Added the <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, and <code>ruby-text-container </code></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td>
   <td>{{Spec2('CSS3 Grid')}}</td>
   <td>Added the grid box model values.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td>
   <td>{{Spec2('CSS3 Flexbox')}}</td>
   <td>Added the flexible box model values.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Added the table model values and <code>inline-block<em>.</em></code></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial definition. Basic values: <code>none</code>, <code>block</code>, <code>inline</code>, and <code>list-item</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td><code>none</code>, <code>inline</code> and <code>block</code></td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>4.0</td>
   <td>7.0</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td><code>inline-block</code></td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.9")}}</td>
   <td>5.5 [4]</td>
   <td>7.0</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td><code>list-item</code></td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>6.0</td>
   <td>7.0</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td>inline-list-item</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}} [6]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td rowspan="2"><code>run-in</code> {{experimental_inline}}</td>
   <td>1.0 [5]</td>
   <td rowspan="2">{{CompatNo}}</td>
   <td rowspan="2">8.0</td>
   <td rowspan="2">7.0</td>
   <td>1.0 (85) [5]</td>
  </tr>
  <tr>
   <td>
    <p>4.0</p>

    <p>Removed in 32</p>
   </td>
   <td>
    <p>5.0 (532.5)</p>

    <p>Removed in 8.0</p>
   </td>
  </tr>
  <tr>
   <td><code>inline-table</code></td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.9")}}</td>
   <td>8.0</td>
   <td>7.0</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-header-group</code>, <code>table-row-group</code>, <code>table-footer-group</code>, <code>table-row</code>, and <code>table-caption</code></td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>8.0</td>
   <td>7.0</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td><code>flex</code></td>
   <td>21.0{{property_prefix("-webkit")}}</td>
   <td>{{CompatGeckoDesktop("18.0")}} [1]<br>
    {{CompatGeckoDesktop("20.0")}}</td>
   <td>11</td>
   <td>12.50</td>
   <td>6.1{{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td><code>inline-flex</code></td>
   <td>21.0{{property_prefix("-webkit")}}</td>
   <td>{{CompatGeckoDesktop("18.0")}} [1]<br>
    {{CompatGeckoDesktop("20.0")}}</td>
   <td>11</td>
   <td>12.50</td>
   <td>6.1{{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td><code>grid</code> {{experimental_inline}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>10.0{{property_prefix("-ms")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>inline-grid</code> {{experimental_inline}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>10.0{{property_prefix("-ms")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, <code>ruby-text-container</code> {{experimental_inline}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("34.0")}} [3]</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>contents</code> {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("37")}} [2]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>4.4</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>7.0{{property_prefix("-webkit")}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to <code>true</code>. Multi-line flexbox are supported since Firefox 28.</p>

<p>[2] In Firefox 36, it the preference governing this feature was off by default.</p>

<p>[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.</p>

<p>[4] Natural inline elements only</p>

<p>[5] Not before inline-elements</p>

<p>[6] See {{bug(1105868)}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{Cssxref("visibility")}}, {{Cssxref("float")}}, {{Cssxref("position")}}</li>
 <li>{{Cssxref("flex")}}</li>
</ul>