This translation is incomplete. Please help translate this article from English.

Özet

display özelliği, bir eleman için kullanılan kutu görüntüleme türünü belirler. HTML'de, varsayılan display 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 display değeri inline'dır.

Bir çok farklı kutu görüntüleme tipi olmasıyla birlikte, none 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.

Initial valueinline
Applies toall elements
Inheritedno
Mediaall
Computed valueas the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified.
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sözdizimi kuralları

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;

Değerler

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

Değer kümesi Değer Tanım
Basic values (CSS 1) none

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.

Görüntülemeye kapadığınız elementin kutu boyutlarının halen tasarımda var olmasını istiyorsanız visibility özelliğine gözatın.

inline bir veya daha fazla satıriçi kutusu oluşturur.
block blok element kutusu oluşturur.
list-item Element içerik için bir blok kutusu oluşturur, ve içeriği listeye ayırır.
Gelişletilmiş değerler (CSS 2.1) inline-block inline-block değeri, kendisini çevreleyen bir block element alanı oluşturur.
Table model değerler (CSS 2.1) inline-table inline-table  değeri HTML üzerinde direkt olarak bir mapping'e sahip değildir.  <table> HTML elementi gibi davranır ancak farklı olarak, block elementi değil, inline-block özelliklerini taşır.
table Bu elementler block <table> gibi davranır.
table-caption Bu elementler <caption> HTML elementler gibi davranır.
table-cell Bu elementler <td> gibi davranır..
table-column Bu elementler <col> gibi davranır.
table-column-group Bu elementler <colgroup> gibi davranır.
table-footer-group Bu elementler <tfoot> gibi davranır.
table-header-group Bu elementler <thead> gibi davranır.
table-row Bu elementler <tr> gibi davranır.
table-row-group Bu elementler <tbody> gibi davranır.
CSS3 liste değerleri (CSS3) inline-list-item 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.
Flexbox model değerleri (CSS3) flex Element, block elementi gibi davranır ve flexbox modeline uygun olarak görünür.
inline-flex Element inline element gibi davranır ve flexbox modeline uygun olarak görünür.
Grid box model değerleri (CSS3) grid

Element, block elementi gibi davranır ve
grid modeline uygun olarak görünür.

Deneyimlenebileceği üzere, çoğu tarayıcı henüz desteklememektedir. Özellikle -moz-grid 'in display:grid'e ait bir prefix olmadığını belirtmeliyiz. -moz-grid XUL layout model 'de belirtilen ve kullanmamanız gereken bir prefix'tir.
inline-grid Element inline element gibi davranır ve grid modeline bağlı olarak içeriği kapsar.
Ruby formatting model values (CSS3) ruby Element inline element gibi davranır ve
içeriği ruby format modelinde kapsar <ruby> gibi davranır.
ruby-base Bu elementler <rb> gibi davranır.
ruby-text Bu elementler <rt> gibi davranır
ruby-base-container These elements behave like <rbc> elements generated as anonymous boxes.
ruby-text-container These elements behave like <rtc> elements.
Experimental values run-in
  • If the run-in box contains a block box, same as block.
  • If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.
  • If an inline box follows, the run-in box becomes a block box.
contents These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.

Formal syntax

[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

where
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | subgrid | ruby
<display-listitem> = list-item && <display-outside>? && [ flow | flow-root ]?
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> = contents | none
<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid

Examples

View Live Examples

p.secret  { display: none }
<p style="display:none"> invisible text </p>

Specifications

Specification Status Comment
CSS Lists Module Level 3
The definition of 'display' in that specification.
Working Draft Added the inline-list-item values.
CSS Display Module Level 3
The definition of 'display' in that specification.
Working Draft Added the run-in and contents values.
CSS Ruby Layout Module Level 1
The definition of 'display' in that specification.
Working Draft Added the ruby, ruby-base, ruby-text, ruby-base-container, and ruby-text-container
CSS Grid Layout
The definition of 'display' in that specification.
Candidate Recommendation Added the grid box model values.
CSS Flexible Box Layout Module
The definition of 'display' in that specification.
Candidate Recommendation Added the flexible box model values.
CSS Level 2 (Revision 1)
The definition of 'display' in that specification.
Recommendation Added the table model values and inline-block.
CSS Level 1
The definition of 'display' in that specification.
Recommendation Initial definition. Basic values: none, block, inline, and list-item.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
none, inline and block 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0 (85)
inline-block 1.0 3.0 (1.9) 5.5 [4] 7.0 1.0 (85)
list-item 1.0 1.0 (1.7 or earlier) 6.0 7.0 1.0 (85)
inline-list-item No support No support [6] No support No support No support
run-in 1.0 [5] No support 8.0 7.0 1.0 (85) [5]

4.0

Removed in 32

5.0 (532.5)

Removed in 8.0

inline-table 1.0 3.0 (1.9) 8.0 7.0 1.0 (85)
table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, and table-caption 1.0 1.0 (1.7 or earlier) 8.0 7.0 1.0 (85)
flex 21.0-webkit 18.0 (18.0) [1]
20.0 (20.0)
11 12.50 6.1-webkit
inline-flex 21.0-webkit 18.0 (18.0) [1]
20.0 (20.0)
11 12.50 6.1-webkit
grid ? No support 10.0-ms ? ?
inline-grid ? No support 10.0-ms ? ?
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container ? 34.0 (34.0) [3] ? ? ?
contents No support 37 (37) [2] No support No support No support
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.4 ? ? ? 7.0-webkit

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

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

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

[4] Natural inline elements only

[5] Not before inline-elements

[6] See bug 1105868

See also

Document Tags and Contributors

Contributors to this page: cengizhan.peker, fscholz, pasalog
Last updated by: cengizhan.peker,