display property کیا کنٹرول کرتی ہے؟

Question

Accepted Answer

`display` سب سے بنیادی CSS properties میں سے ایک ہے — یہ کنٹرول کرتی ہے کہ **ایک element کیسے ایک box بناتا ہے** اور اس کے children کو کیسے ترتیب دیا جاتا ہے۔

```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 */
```

## Outer بمقابلہ inner display

`display` اصل میں دو چیزیں سیٹ کرتی ہے: box کا رویہ **باہر** (block/inline) اور یہ کہ یہ اپنے **children** کو **اندر** کیسے ترتیب دیتا ہے (flow/flex/grid)۔ `display: flex` کا مطلب ہے "یہ box block-level ہے، اور اس کے children flex items ہیں۔"

## display: none بمقابلہ visibility: hidden

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

ایک اہم فرق: `display: none` layout کو سکیڑتا ہے (اور screen readers سے چھپاتا ہے)؛ `visibility: hidden` وہ جگہ رکھتا ہے جہاں element تھا۔ `display: none` استعمال کریں واقعی ہٹانے کے لیے، `visibility: hidden` layout کو محفوظ رکھتے ہوئے چھپانے کے لیے۔

## Layout workhorses

```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);
}
```

جدید layout تقریباً مکمل طور پر `flex` (1D — rows یا columns) اور `grid` (2D — rows اور columns ساتھ میں) پر بنایا گیا ہے۔

## اہمیت کیوں ہے

`display` ایک element کے پورے layout behavior کا تعین کرتی ہے۔

Block بمقابلہ inline بمقابلہ inline-block کو جاننا default flow کی وضاحت کرتا ہے؛ `flex`/`grid` جدید layout کا مرکز ہیں؛ اور `none` بمقابلہ `visibility` کا فرق ایک بار بار ٹیسٹ ہونے والی، عملی اہمیت والی تفصیل ہے۔