जानिए CSS में display property क्या है। Block, inline, inline-block और flexbox के बीच का अंतर सीखें Vivaa Technologies के साथ।

CSS Display Property Guide: Block, Inline और Flex

जब आप web development सीखना शुरू करते हैं, तो layout को सही जगह पर सेट करना सबसे महत्वपूर्ण हिस्सा होता है। हर web developer को यह पता होना चाहिए कि web page पर elements कैसे behave करते हैं। इसके लिए CSS में सबसे जरूरी property CSS display property है।

Vivaa Technologies में हमारे students अक्सर यह पूछते हैं कि elements अपनी जगह क्यों बदल लेते हैं या एक-दूसरे के नीचे क्यों आ जाते हैं। इस blog post में हम CSS display property के सबसे जरूरी values को आसान भाषा में समझेंगे।

CSS Display Property क्या है?

CSS में CSS display property यह तय करती है कि कोई भी HTML element web page पर कैसे render होगा, यानी वह block-level होगा या inline होगा। किसी भी element का default layout बदलने के लिए हम इसी property का इस्तेमाल करते हैं।

1. Block Elements

Block elements हमेशा एक नई line से शुरू होते हैं और page की पूरी width (चौड़ाई) लेते हैं। भले ही content छोटा हो, यह पूरी width घेर लेते हैं।

Examples: <div>, <p>, <h1> to <h6>, <ul>, <li>
Characteristics: इनकी width और height set की जा सकती है।

CSS

div {
  display: block;
  width: 100%;
}

2. Inline Elements

Inline elements नई line से शुरू नहीं होते। यह उसी line में तब तक आगे बढ़ते जाते हैं जब तक space मिलता है।

Examples: <span>, <a>, <strong>, <em>
Characteristics: इनकी width और height properties काम नहीं करती हैं। यह केवल अपने content के हिसाब से जगह लेते हैं।

CSS

span {
  display: inline;
}

3. Inline-Block Elements

यह दोनों का combination है। यह inline elements की तरह उसी line में रहते हैं, लेकिन आप इनकी width और height को block elements की तरह control कर सकते हैं।

CSS

.card {
  display: inline-block;
  width: 200px;
  height: 150px;
}

4. Display: None और Visibility

अगर आपको किसी element को page से पूरी तरह गायब करना है (यानी वह space भी न ले), तो हम display: none का इस्तेमाल करते हैं। ध्यान दें, यह visibility: hidden से अलग है, क्योंकि visibility: hidden element को छुपा देता है लेकिन उसकी जगह खाली छोड़ देता है।

निष्कर्ष (Conclusion)

CSS में सही CSS display property का इस्तेमाल web layouts की नींव है। चाहे आप simple webpage बना रहे हों या complex MERN stack applications, इन concepts की गहरी समझ होना जरूरी है। अगर आप web development में अपने skills को professional level तक ले जाना चाहते हैं, तो Vivaa Technologies के साथ जुड़े रहें और practice करते रहें!