display özelliği neyi denetler?

Question

Accepted Answer

`display` en temel CSS özelliklerinden biridir — **bir öğenin kutu nasıl oluşturduğunu** ve alt öğelerinin nasıl düzenlendiğini denetler.

```css
.a { display: block; }        /* full width, starts new line (div, p, section) */
.b { display: inline; }       /* flows in text, ignores width/height (span, a) */
.c { display: inline-block; } /* flows inline BUT respects width/height/margins */
.d { display: none; }         /* removed entirely — no space, not rendered */
.e { display: flex; }         /* flex container — 1D layout for children */
.f { display: grid; }         /* grid container — 2D layout for children */
```

## Dış ve iç görüntüleme

`display` aslında iki şeyi ayarlar: kutu **dışarıda** nasıl davranır (block/inline) ve **alt öğelerini** içerde nasıl düzenler (flow/flex/grid). `display: flex` "bu kutu blok düzeyinde ve alt öğeleri flex öğeleridir" anlamına gelir.

## display: none vs visibility: hidden

```css
.gone   { display: none; }        /* removed from layout — takes NO space */
.hidden { visibility: hidden; }    /* invisible but STILL occupies its space */
```

Önemli bir fark: `display: none` düzeni daraltır (ve ekran okuyuculardan gizler); `visibility: hidden` öğenin olduğu yerde bir boşluk bırakır. Tamamen kaldırmak için `display: none` kullanın, düzeni korurken gizlemek için `visibility: hidden` kullanın.

## Düzenin çalıştayları

```css
.container {
  display: flex;          /* lay children in a row/column (one dimension) */
  gap: 1rem;
}
.grid {
  display: grid;          /* lay children in rows AND columns (two dimensions) */
  grid-template-columns: repeat(3, 1fr);
}
```

Modern düzen neredeyse tamamen `flex` (1D — satırlar veya sütunlar) ve `grid` (2D — satırlar ve sütunlar birlikte) üzerine inşa edilmiştir.

## Neden önemli

`display` bir öğenin tüm düzen davranışını belirler.

block, inline ve inline-block arasındaki farkı bilmek varsayılan akışı açıklar; `flex`/`grid` modern düzenin özüdür; ve `none` ile `visibility` arasındaki fark sık sık test edilen, pratik açıdan önemli bir ayrıntıdır.