display property શું નિયંત્રિત કરે છે?

Question

Accepted Answer

`display` સૌથી મૌલિક CSS properties પૈકીની એક છે — તે નિયંત્રિત કરે છે **કે એક element કેવી રીતે box જનરેટ કરે છે** અને તેના children કેવી રીતે lay out થાય છે।n
```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 */
```

## બાહ્ય વિરુદ્ધ આંતરિક display

`display` વાસ્તવમાં બે વસ્તુઓ સેટ કરે છે: બૉક્સ કેવી રીતે **બહાર** વર્તે છે (block/inline) અને તે તેના **children** ને **અંદર** કેવી રીતે lay out કરે છે (flow/flex/grid). `display: flex` નો અર્થ છે "આ બૉક્સ 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` તે જગ્યાએ એક gap છોડી દે છે જ્યાં element હતો. `display: none` નો ઉપયોગ કરો સંપૂર્ણપણે દૂર કરવા માટે, `visibility: hidden` લેઆઉટ સાચવતા છુપાવવા માટે.

## લેઆઉટ 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);
}
```

આધુનિક લેઆઉટ લગભગ સંપૂર્ણપણે `flex` (1D — rows અથવા columns) અને `grid` (2D — rows અને columns એક સાથે) પર બનેલું છે.

## શા માટે તે મહત્વનું છે

`display` એક element ના સંપૂર્ણ લેઆઉટ વર્તણૂક નક્કી કરે છે.

block વિરુદ્ધ inline વિરુદ્ધ inline-block જાણવું default flow સમજાવે છે; `flex`/`grid` આધુનિક લેઆઉટના મૂલ છે; અને `none` વિરુદ્ધ `visibility` તફાવત એક વારંવાર-પરીક્ષિત, વ્યવહારીક-મહત્વની વિગત છે.