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, inline మరియు inline-block మధ్య వ్యత్యాసం తెలుసుకోవడం డిఫాల్ట్ ప్రవాహాన్ని వివరిస్తుంది; `flex`/`grid` ఆధుनిక లేఅవుట్ యొక్క కేంద్రమాണి; మరియు `none` మరియు `visibility` మధ్య వ్యత్యాసం తరచుగా పరీక్షించబడిన, ఆచరణాత్మకంగా ముఖ్యమైన విశదాংశం.