CSS display özelliği

Tanım ve Kullanım

display özelliği, elementin oluşturacağı kutu türünü belirler.

Açıklama

Bu özellik, yerleşim oluşturulurken elementin oluşturacağı görüntüleme kutusu türünü tanımlamak için kullanılır. HTML gibi belge türleri için display'in dikkatli kullanılmaması tehlikeli olabilir, çünkü HTML'de zaten tanımlanmış görüntüleme hiyerarşisini ihlal edebilir. XML için, XML'nin bu tür bir hiyerarşisi içermemesi nedeniyle tüm displayler kesinlikle gerekli olabilir.

Açıklama:CSS2'de 'compact' ve 'marker' değerleri vardı, ancak geniş destek eksikliği nedeniyle CSS2.1'den kaldırılmıştır.

Ayrıca bkz:

CSS Eğitimleri:CSS Konumlandırma

HTML DOM Referans Kılavuzu:display özelliği

Örnek

Paragrafları satır içi çerçevelere dönüştür:

p.inline
  {
  display:inline;
  }

Kişisel olarak deneyin

CSS Grameri

display: value;

Özellik değeri

Değer Açıklama
none Bu element görüntülenmez.
block Bu element, blok elementi olarak görüntülenir, bu elementin başı ve sonunda satır atlamaları vardır.
inline Varsayılan. Bu element, iç içe yerleştirilmiş element olarak görüntülenir, elementin başı ve sonunda satır atlaması yoktur.
inline-block Satır içi blok elementi. (CSS2.1 tarafından eklenen değer)
list-item Bu element, liste olarak görüntülenir.
run-in Bu element, bağlamına göre blok elementi veya iç içe yerleştirilmiş element olarak görüntülenir.
compact CSS'te 'compact' değeri var, ancak geniş destek eksikliği nedeniyle CSS2.1'den kaldırılmıştır.
marker CSS'te bir değer var marker, ancak geniş destek eksikliği nedeniyle CSS2.1'den kaldırılmıştır.
table Bu element, blok tablosu olarak gösterilir (örneğin <table>), tablo başında ve sonunda satır atlaması vardır.
inline-table Bu element, içe aktarma tablosu olarak gösterilir (örneğin <table>), tablo başında ve sonunda satır atlaması yoktur.
table-row-group Bu element, bir veya daha fazla satır grubu olarak gösterilir (örneğin <tbody>)
table-header-group Bu element, bir veya daha fazla satır grubu olarak gösterilir (örneğin <thead>)
table-footer-group Bu element, bir veya daha fazla satır grubu olarak gösterilir (örneğin <tfoot>)
table-row Bu element, bir tablo satırı olarak gösterilir (örneğin <tr>)
table-column-group Bu element, bir veya daha fazla sütun grubu olarak gösterilir (örneğin <colgroup>)
table-column Bu element, bir hücre sütunu olarak gösterilir (örneğin <col>)
table-cell Bu element, bir tablo hücresi olarak gösterilir (örneğin <td> ve <th>)
table-caption Bu element, bir tablo başlığı olarak gösterilir (örneğin <caption>)
inherit display özelliğinin değerinin ebeveyn elementinden devralınması gerektiği belirlenmelidir.

Teknik Ayrıntılar

Varsayılan Değer: inline
Devralabilirlik: hayır
Sürüm: CSS1
JavaScript Dilbilgisi: object.style.display="inline"

TIY Örneği

Bir elementi içe aktarma elementi olarak nasıl gösterilir
Bu örnek, bir elementi içe aktarma elementi olarak nasıl gösterileceğini gösterir.
Bir elementi blok elementi olarak nasıl gösterilir
Bu örnek, bir elementi blok elementi olarak nasıl gösterileceğini gösterir.

Tarayıcı Desteği

Tablo içindeki sayılar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Açıklama:Eğer !DOCTYPE belirlenmişse, Internet Explorer 8 (ve daha yüksek sürümler) "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" ve "inherit" gibi özellik değerlerini destekler.