display

Ö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.

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 | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<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

Browser compatibility

[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

• visibility, float, position
• flex