display गुणधर्म काय नियंत्रित करतो?

Question

Accepted Answer

`display` सर्वात मौलिक CSS गुणधर्मांपैकी एक आहे — हे **एक घटक बॉक्स कसे तयार करतो** आणि **त्याचे मुले कसे मांडले जातात** हे नियंत्रित करते.

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

## बाहेरील vs आंतरिक प्रदर्शन

`display` खरेतर दोन गोष्टी सेट करते: बॉक्स **बाहेर** कसे वर्तन करतो (block/inline) आणि तो त्याचे **मुले** **अंदर** कसे मांडते (flow/flex/grid). `display: flex` म्हणजे "हा बॉक्स ब्लॉक-स्तरीय आहे, आणि त्याचे मुले flex आयटम आहेत".

## display: none vs visibility: hidden

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

एक महत्वाचा फरक: `display: none` लेआउट संकुचित करते (आणि स्क्रीन वाचकांमधून लपवते); `visibility: hidden` घटक होता तेथे एक अंतर ठेवते. साचे काढण्यासाठी `display: none` वापरा, लेआउट जतन करताना लपवण्यासाठी `visibility: hidden` वापरा.

## लेआउट कामगार

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

आधुनिक लेआउट जवळजवळ पूर्णपणे `flex` (1D — पंक्ती किंवा स्तंभ) आणि `grid` (2D — पंक्ती आणि स्तंभ एकत्र) वर बांधलेले आहे.

## हे महत्वाचे का आहे

`display` घटकाचे संपूर्ण लेआउट वर्तन निर्धारित करते.

block vs inline vs inline-block समजणे डिफॉल्ट प्रवाह स्पष्ट करते; `flex`/`grid` आधुनिक लेआउटचे मूल आहेत; आणि `none` vs `visibility` फरक एक वारंवार-परीक्षित, व्यावहारिकदृष्ट्या-महत्वाचा तपशील आहे.