CSS'de display özelliğinin temel anlamı nedir ve…

display özelliği, bir öğenin belgede nasıl görüntüleneceğini ve diğer öğelerle nasıl etkileşime gireceğini belirler; bu, düzen akışında (layout flow) yer alır. Öğenin biçimlendirme bloğu türünü tanımlar.

Ana değerler:

block: Öğenin biçimlendirmesi blok şeklindedir. Tüm kullanılabilir genişliği kaplar, yeni bir satırda başlar ve belirli boyutlara (width, height) sahip olabilir.
inline: Öğenin biçimlendirmesi satır içi. Yeni bir satır başlatmaz, yalnızca gereken genişliği kaplar ve belirli boyutlara (width, height) sahip olamaz. Dikey kenar boşlukları (margin-top, margin-bottom) ve iç boşluklar (padding-top, padding-bottom) çevresindeki öğeleri etkilemez.
inline-block: Satır içi biçimlendirilmiş, ancak satır içinde blok gibi davranır. Yeni satır başlatmaz, belirli boyutlara (width, height) sahip olabilir ve çevresindeki öğeleri etkileyen dikey kenar boşlukları ve iç boşluklar içerebilir.
none: Öğenin ve içeriğinin görüntülenmesini engeller. Öğeyi belge akışından tamamen kaldırır ve yer kaplamaz.
flex: Öğeyi Flex konteyner yapar ve doğrudan alt öğeleri Flex öğeleri olur. Esnek düzenler oluşturmak için kullanılır.
grid: Öğeyi Grid konteyner yapar. ızgara tabanlı düzenler oluşturmak için kullanılır.

Nasıl çalışır:

Tarayıcı, display değerini kullanarak öğenin bulunduğu biçimlendirme bağlamı türünü belirler. Bu, şunları etkiler:

Belge akışı: Öğenin komşularına göre konumlandırılması.
Öğe boyutları: Genişlik ve yükseklik ayarlama imkanı ve içeriğin boyutlara etkisi.
Çevreleyen öğelere etkisi: Öğenin kenar boşlukları ve boyutlarının diğer öğelerin düzenlenmesini nasıl etkilediği.

Örnek:

/* display: block olan öğe */
div {
  display: block;
  width: 100%; /* Tüm genişliği kaplar */
  margin-bottom: 10px; /* Dikey boşluk oluşturur */
}

/* display: inline olan öğe */
span {
  display: inline;
  /* width ve height yok sayılır */
  /* margin-top ve margin-bottom yok sayılır */
}

/* display: inline-block olan öğe */
img {
  display: inline-block;
  width: 100px; /* Genişlik ayarlanabilir */
  height: 100px; /* Yükseklik ayarlanabilir */
  margin: 5px; /* Tüm kenarlarda boşluk oluşturur */
}

/* Gizli öğe */
.hidden {
  display: none;
}

CSS'de display özelliğinin temel anlamı nedir ve nasıl çalışır?