CSS में display Property का उपयोग

Siddharth Sharma
Mar 2, 2025
3 min read

CSS में display property का उपयोग वेबपेज पर elements के layout और positioning को नियंत्रित करने के लिए किया जाता है। यह निर्धारित करती है कि एक element को document flow में कैसे render किया जाएगा और यह अन्य elements के साथ कैसे interact करेगा। display property कई values ले सकती है, जिनमें से प्रत्येक element की positioning और behavior को अलग तरह से प्रभावित करती है। यहां सबसे common values दी गई हैं:

1. display: block;

Behavior: Element एक block-level box बनाता है, जिसका अर्थ है कि यह अपने parent container की पूरी width लेता है और एक नई लाइन से शुरू होता है।
Examples: <div>, <p>, <h1> से <h6>, <section>, <header>, <footer>।
Positioning: Block-level elements डिफ़ॉल्ट रूप से vertically stack होते हैं, एक के बाद एक।

css

div {
    display: block;
}

2. display: inline;

Behavior: Element एक inline-level box बनाता है, जिसका अर्थ है कि यह केवल उतनी ही width लेता है जितनी जरूरी होती है और यह नई लाइन से शुरू नहीं होता है।
Examples: <span>, <a>, <strong>, <em>।
Positioning: Inline elements text content के साथ horizontally flow होते हैं और width, height, या top/bottom margins को respect नहीं करते हैं।

css

span {
    display: inline;
}

3. display: inline-block;

Behavior: Element एक ऐसा box बनाता है जो inline-level होता है, लेकिन आप इसमें width, height, और margins (दोनों horizontal और vertical) set कर सकते हैं।
Positioning: यह text और अन्य inline elements के साथ inline flow होता है, लेकिन styling के मामले में block-level element की तरह behave करता है।

css

button {
    display: inline-block;
    width: 100px;
    height: 40px;
}

4. display: none;

Behavior: Element को document flow से पूरी तरह हटा दिया जाता है और इसे पेज पर render नहीं किया जाता है।
Positioning: Element कोई space नहीं लेता है, और अन्य elements उसकी जगह fill करते हैं।

css

.hidden {
    display: none;
}

5. display: flex;

Behavior: Element एक flex container बन जाता है, और इसके children (flex items) flexbox model के अनुसार layout होते हैं।
Positioning: Flexbox flexible और responsive layouts बनाने की अनुमति देता है, जिसमें alignment, spacing, और items के order को control किया जा सकता है।

css

.container {
    display: flex;
    justify-content: space-between;
}

6. display: grid;

Behavior: Element एक grid container बन जाता है, और इसके children (grid items) grid system में layout होते हैं।
Positioning: CSS Grid complex, two-dimensional layouts (rows और columns के साथ) बनाने की अनुमति देता है।

css

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

7. display: inline-flex; और display: inline-grid;

Behavior: ये values element को एक inline-level element की तरह behave कराती हैं, लेकिन इसके children को flexbox या grid layout का उपयोग करके layout किया जाता है।
Positioning: Container खुद inline flow होता है, लेकिन इसके children flexbox या grid का उपयोग करके layout होते हैं।

css

.inline-flex-container {
    display: inline-flex;
}

.inline-grid-container {
    display: inline-grid;
}

8. display: table;, display: table-row;, display: table-cell;

Behavior: ये values elements को HTML table elements (<table>, <tr>, <td>) की तरह behave कराती हैं।
Positioning: वास्तविक table markup का उपयोग किए बिना table-like layouts बनाने के लिए उपयोगी।

css

.table {
    display: table;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

Summary

display property CSS में elements की positioning और उनके आपसी interaction को नियंत्रित करने के लिए बहुत महत्वपूर्ण है। उचित display value चुनकर, आप simple inline text से लेकर complex grid-based designs तक कई प्रकार के layouts बना सकते हैं।