💻 CSS Display Properties Explained | Block, Inline, Inline-Block & None

Name: 💻 CSS Display Properties Explained | Block, Inline, Inline-Block & None
Uploaded: 2025-12-13T08:59:21+00:00
Duration: 57 min 58 s
Channel: skillwaala

skillwaala

47 minutes ago

👨‍💻 What You’ll Learn in This Class:
✅ What is the display property in CSS
✅ Difference between block, inline, inline-block, and none
✅ Real-time behavior of elements like , , and
✅ How to hide and show elements using display: none;
✅ How display affects spacing, width, and layout flow

GitHub url :- https://github.com/DevanshuSir/Full_Stack_Skillwaala_17nov_2025.git
Assignment url :-
https://drive.google.com/drive/folders/1xReCWLRl6WwNvOBH7lcC_XoPG_ma2EdM

Category

📚

Learning

Transcript

Display full video transcript

00:00साइनाथ, रवी, अन्मूल, शिवाक्षी, एल, दिपिका

00:07एक बार सब रेस्पोंस कर दो कि पीरी वाइस किलियर है

00:30कि व एक अन्मूल, भाय क कोती है

01:00झाल झाल

01:30झाल झाल

02:00झाल

02:30झाल

03:00अब एक बार रेस्पोंस कर देना कि मेरी वाइस आ रही है विल्बूल सही पर्फेक्ट

03:22मैं आपको स्क्रीन भी शेर कर देता हूं सीट का रेस्पोंस भी कर देना हूं

03:26एक बार रेस्पोंस कर देना कि स्क्रीन भी वीजिबल है और वाइस भी किलिए है

03:44सीट का रेस्पोंस कर देना

03:56ठीक है तो आज वाली क्लास में अपन डिसकस करने वाले जितनी भी चीज़े अपने देखी थी उसी के अंदर अपन आगे डिसकस करने वाले

04:14तो कहां तक अपने देख लिया था अपने अपने कर लेता हूं और अपने अपने

04:23स्पेर अनू है तो अपने प्रिवेस पो टीज़े उसपा ने डिसकस कर आथ है आपना

04:44बीजास में उसके अपने अपने टंस फोर्म यह रह रहा है तूर अपने अपने मृस्ट चीजिए अपनर डिसें अमक्रीनिए याज्चीट JIM

04:53आज अपन डिस्कस करते हैं यापर CSS के अंदर अपनी

04:56display properties की CSS में display properties क्या होती है

05:01और क्या गावा ठीक है तो पहले अपन display properties

05:04पर discuss कर लेते हैं उसके बाद आपके जो भी doubt होंगे

05:08वो doubt भी अपन यापर clear करेंगे जो भी doubt होंगे आपके

05:11ठीक है तो चलो पन यहाँ पर अपने display property पर discuss कर लेते हैं

05:17पहले अपन continue करें या फिर पहले आपके जो भी doubt होंगे डिस्कस करें

05:21एक बार comment करके बता दो जितने भी students है वो कि पहले class continue करें

05:27या फिर doubt पर discussion करें अपन

05:29continue class continue ठीक है ठीक है तो आज अपन डिस्कस करने वाले अपने display property के उपर कि

05:52अपनी display property क्या होती है और अपन इसको किस तरीके से यूज लेते हैं तो यहाँ पर एक बार के लिए में

05:57css वाले class को ही open कर लेता हूं css class को यहाँ पर open कर लेता हूं और

06:02overflow भी कल अपने discuss किया था आज अपन एक नई चीज पर discuss कर रहे हैं वह अपने पास अपने display property के उपर

06:09तो यहाँ पर मैं रहता हूं display.stml यहाँ पर अपनी नई class बना लेते हैं

06:16ठीक है तो यहाँ पर boiler plate लगा दते हैं अब देखो css में display property क्या होती है अपने पास चितने भी अपने tag है चितने भी tag के अंदर अपने content लिखते हैं अपने elements है उनकी

06:32सबकी एक display property होती है और अपने discuss भी किया था अपने display property में वो अपने देखा था कि अपने ब्लॉक लेवल elements क्या होता है और अपने inline elements क्या होता है तो वो basically अपने display की property ही है

06:56ठीक है तो वो अपने पास क्या है अपनी display properties ही है तो display properties basically

07:01काम आती है अपना जो layout होता है उसको control करने की की अपने अपने अपने देखा था अपना

07:17डिव जो था वो अपने पास क्या था अपना ब्लॉक लेवल एलिमेंट और जो अपना

07:21स्पैन था वो अपने पास अपना इनलाइन एलिमेंट था यह इनकी

07:24default display property है जैसे वालो मैं यहाँ पर ले लेता हूँ मैं यहाँ बोलता हूँ

07:29अबने एक box लिला एक अपन यहाँ पर लिलता है अपना एक box यह अपने पास क्याए अपना डिव और हैज इंग आते हैं

07:52अपने पास डिवाड आ है अपना ella contained हो अने अपने पास किया अपना इनलाइन यह जैसे अपने सो

07:57ब्राउन और इसका कनलर में चेंज करके यहां पर लगाजता हूँ जैसे वाइट यह मैंने किस पर किया आपने box के ऊपर तो यह बने box पर गडिया सेम ऐसे ही मैं यहां पर किसको target कर लेता हूँ

08:17आपने span tag को तो इसको भी इसको class देतो और इसको यहां पर कहतो span box

08:23ठीक है, span box यहाँ पर अपने इसको class देते हैं, मैं यहाँ पर कहता हूँ, dot span box, जो मेरे पास है, उसको एक background color अपन देते हैं, जैसे मैंने green दिया, और इसका color अपन यहाँ पर कहते हैं, इपना pipe देते हैं, ठीक है, तो अभी अपने यहाँ पर जो दोनों element लिए है, div अपने �

08:53बोरी line यह occupy करते हैं, अपने blog level element, ठीक है, 100% width यहाँ पर यह रखते हैं, और अगर अपन बात करते हैं, अपने line की, तो जितना अपने पास अपना content है, उतनी ही वो line occupy करते हैं, उतनी ही width और height वहाँ पर apply होती है, ठीक है, उतनी ही वो लेते हैं, अब जैसे मानलो, आप चा

09:23लेकिन मैं चाहता हूँ उसको inline के अंदर convert करना, तो अपने पास अपनी display property आती है, ये width क्या है, अपने पास block level element, मैं इसको inline में convert करना चाहता हूँ, तो मैं इस पर लगाँगा अपनी display property, और display property लगा कि मैं या आपर क्या बोलूँगा अपना inline, तो यहाँ पर यह जो �

09:53default value है, div की default value पहले से क्या है display, वो है block, अगर अपन span tag की बात करें, default value पहले से क्या है, तो वो है inline, अगर अपन उसको convert करना चाहता है, तो अपन convert कर सकते है, अपनी display property की दूँगा, तो यहाँ पर अपने पास अपनी display property अपने देखी, जो मैंने यहाँ पर इसकी value क्या कर

10:23block, तो जैसे ही मैं इसको block में convert करूँगा, तो अपना span tag इसमें convert हो जाएगा अपना block level element के अंदर, चीक है, तो यह अपने पास है अपना display और अपना display के अंदर दो value, अपने देखा block और inline, तो अपने पास जिदनी भी elements है, जो block level elements है, उनको अपन inline में convert कर सकते हैं, और �

10:53तो यह अपने पास थे, अब अपने पास block level elements है कौन-कोन से, और inline है कौन-कोन से, अलाकि उस पर अपने discussion कर रखा था, अगर मैं यहाँ पर बात करूँ अपने block की, तो अपने पास अपना paragraph है, अपने जो heading tags है, वो सारे अपने पास block level elements है, ठीक है, उसके बाद अगर अप

11:23अब यहाँ पर आते हैं, अब जैसे मैंने इस block level element है, मेरे पास इसकी display

11:53इसकी डिस्प्ले प्रोपर्टी मैंने क्या करती इनलाइन कर दी और इसकी डिस्प्ले प्रोपर्टी मैंने यापर क्या करती ब्लॉक कर दी अब मैं इसकी विड्थ सैट करता हूं

12:02मैं बोलता हूँ कि मेरे पास इसकी display property block है उसकी मैंने width set करे और width मैंने यहाँ पर कह दी कि 400 pixel यहाँ पर इसकी width रख लेना

12:11तो यहाँ पर इसकी 400 pixel width हो जाएगी कोई लिक्त नहीं है

12:14मैं 400 ना कहिके जैसे कहते हैं 200 pixel आप इसकी width रख लेना तो इसकी width क्या होगी 200 pixel

12:20और ऐसे ही मैं यहाँ पर आता हूँ और इसकी height मैं यहाँ पर कहता हूँ 200 pixel इसकी height रख लेना

12:26तो जो अपना block level element है क्योंकि block ही है अपना span ऐसे तो initial क्या inline है लेकिन मैंने इसको convert कर दिया

12:33किसमें convert कर दिया अपने block level element के अंदर span tag को convert कर दिया अपने display property के तो मैंने इसकी width और height यहाँ पर set करी तो अपने इस element की width और height यहाँ पर set अपने width बोली

12:47वह यहाँ पर विद्दध खें इसकी 400 pixel width कर देना और इसकी height है

12:55यहां पर क्या करते हूँ। दोनों अपने टूहंड्रेट यहांपर सेट होगी है.. ऐसे ही, जो अपने पास अपना इंलाइन

13:03element है, उसकी मैं width और height set करके देखता हूँ, box को अपने यहापर क्या कर रखा है, in-line, इसकी मैं यहापर width set करता हूँ, मैंने width set करी, मैंने गोला

13:11पूलए इसल आप इसकी width रखना है, तो देखों, यहापर क्या होता है, कोई width set नहीं हुई, चितना content है, उतनी ही

13:18वो यहाँ पर आपकी width occupy कर रखा है

13:21इसका मतलब जो अपने inline element होते है

13:25उनके उपर width और height apply नहीं होती है

13:28मतलब एक concept तो यहाँ पर यह के लिए हुआ

13:32कि जो अपने पास block level element होते है

13:35उनके उपर width और height margin padding सब apply होती है

13:38width, height, margin, padding सब चीज़े apply होती है

13:41लेकिन जो अपने पास अपने inline element होते है

13:45उनके width और height apply नहीं होती

13:48और margin और padding की भी अगर अपन बात करे

13:52तो वो apply होती है सिर्फ left और right की

13:55टॉप bottom से margin padding अपने apply नहीं कर सकते है

13:59जैसे मैं यहाँ बराता हूँ

14:00मैं अपने इस inline element की उपर ही क्या लगा रहा हूँ

14:03मैं इस inline element की उपर ही padding लगाना चारा हूँ

14:07ठीक है मैंने बोला padding लगाना चारा हूँ

14:09और मैंने बोला 20 pixel की padding लगा लेना

14:11तो देखो अपने इस inline element पर क्या लगा ही अपनी padding

14:15ठीक है तो यहाँ पर एक काम करो

14:20इस वाले को एक बार के लिए comment कर दो

14:22ठीक है इस वाले को comment कर दो और यहाँ पर check करो

14:27तो देखो यह जो अपना div tag है इसके उपर अपने क्या लगाई अपनी padding अपने यहाँ पर apply करी है

14:33inline यह नहीं अपना inline कर रखा है अपने इसको

14:39ठीक है inline अपने यहाँ पर कर रखा है और 20 पिक्सल के अपने apply करी

14:43top और bottom में नहीं लगनी चीथी वई चलो चेक करते है कोई बात नहीं आपर इसको target करते है

14:49और target करके मैं आपर इसकी padding चेक करता हूँ

14:51खुल ठीक है अपने 20 पिक्सल लगाई 10 पिक्सल पर लगा देते हैं 10 पिक्सल में आपर कहता हूं और 20 पिक्सल में आपर कहता हूं छाए ये वह नहीं आप दिया तो फॉर्स्ट टॉप पर है

15:03सेकिन्ड आपके राइट साइड है थर्ड बॉटम पर है फूर्थ अपने लेप्ट पर है

15:10पेड़े मिनेट

15:33कि में अपने मार्जिन लगा है मार्जिन को इफेक्टि लिखना पतल्ट मार्जिन वाला कॉंसेड ही होता इसके इंदर पैडिं माले

15:56होता है इसके अंदर पैडिंग तो ओल डाइरेक्शन में लगे लेकिन

15:59margin जो है अपना inline element होता है उसमें margin सिफ left और

16:02right की ही apply होती है ठीक है block के अंदर तो सारी होती है

16:06block के अंदर तो अपने डिव के उपर सब कुछ करके देखा है उस

16:09पर सब हो रहा था ठीक है लेकिन अगर अपन बात करते हैं अपने किसकी

16:12inline की तो inline के अंदर width और height set नहीं होती ठीक है inline के

16:17अंदर width और height set नहीं होती और दूसरा वहाँ पर आपकी margin जो है वो

16:22apply होती है सिर्फ left right की top और bottom से नहीं होती ठीक है तो यह बात होगी अपने

16:39अपने block level element की तो inline अपने पास कौन कौन से आते हैं वो अपने देखिए यहाँ पर inline अपने पास अपना image

16:47tag है ठीक है अपने पास अपना anchor tag हो गया ऐसे ही अपने पास अपना span भी दो आता है इसके अंदर span भी लिख लो ठीक है तो यह अपना

16:57inline elements है अब आप बोलोगे कि सर एक चीज समझ में नहीं आ रही है यहाँ पर और वो क्या है मैंने यहाँ पर एक image ली हूँ

17:05अपने यहाँ पर लए ले लेते हैं जिसे ही facebook वाली image है इस image को मैं यहाँ पर लगाता हूँ तो यहाँ पर इस तो इसकी width set हो रही है

17:27width मैंने 200 pixel बोली

17:29ठीक है तो जैसे मैं 200 pixel बोलूँ है

17:32तो यहाँ पर इसकी width set होई

17:34और आप बोलों कि यह image tag

17:36तो यहाँ पर inline element है

17:37और inline element की तो width और height set नहीं होती

17:40लेकिन यहाँ पर कैसे हो रही है

17:42तो यह जो आपका image tag है

17:44यह आपका inline element नहीं है

17:47इसकी जो display property है

17:49वो है inline block

17:51inline block

17:55एक नहीं property आती है inline block

17:58तो इसकी जो display property है

18:00वो क्या है inline block

18:03है किसकी अपने image tag की

18:06अपना जो image tag है

18:08इसकी जो display property है

18:10वो अपने पास क्या है inline block

18:12ठीक है तो देखो यहाँ पर अभी मैं इस image को ठीक है जैसे अपर लेते हैं यहाँ पर कोई नया tag लेते है डिस्प्ले प्रोपर्टी आपको दो तो किलिए रहे कि अपना block क्या होता है और align क्या होता है अब मैं यहाँ पर कोई

18:32एक tag लेता हूँ जैसे मैंने यहाँ पर anchor tag ले लिया और anchor tag के अंदर अपने यहाँ पर लिख देते हैं अपना Amazon यह मैंने यहाँ पर लिखा अब भी अगर आप अपना anchor tag देखोगे तो कौन से प्रोपर्टी है इसकी initial inline property है ठीक है initial inline अपनी display property मैं इस anchor tag को target करता हूँ मैंने

19:02तो यहाँ पर अपनी यह set करा तो अपना जो anchor tag है इसकी अभी initial display property क्या है inline है ठीक है लेकिन मैं चाहता हूँ कि जो inline है उसकी मैं width और height set करना चाहता हूँ

19:17मैं यह बता है कि अपन inline की width और height set नहीं कर सकते हैं लेकिन मैं चाहता हूँ कि अगर कोई inline element है तो मैं उसकी width और height set करना चाहता हूँ

19:26तो वहाँ पर आप display property यूज़ करोगे अपनी inline block मैं display property लगाऊंगा और उसमें value गया दूँगा अपना inline block क्योंकि inline block आपको

19:36आपके element को सिर्फ inline ही रखती है अभी भी आपका element inline ही है लेकिन आप अब इस element की अपने block के हिसाब से आप इसकी width और height set कर सकते हो जैसे मालों बने वहला width मैं बोला हूँ कि आप इसकी width 400 pixel रखना तो इस element की इस anchor tag की width 400 pixel हो जाएगी यहापर अभी भी यह inline element ही है बस यह

20:06ऐसे ही अगर मैं यहापर height की बात करता हूँ जोसे मैंने आपर बोला कि 100 pixel आप यहापर इसकी height कर देना तो यहापर इसकी height 100 pixel हो जाएगी अभी भी यह inline element ही है आपका पूरा complete ठीक है तो यह बात होगे अपने पास किस चीच की अपने display property और वो कौन सी है अपने पास अप

20:36तो block जो होते हैं उसके अंदर अपन यहापर पूरी space occupy करते हैं 100% width वो लेते हैं उसकी width और height अपन चेंज कर सकते हैं margin padding भी चेंज कर सकते हैं सब कुछ apply होता है

20:47inline के अगर अपन बात करें तो inline जो है जितना अपना content है उतनी ही वो width occupy करते हैं और उसके अंदर width और height property apply नहीं होती है

20:58मतलब अपन इसको use नहीं कर सकते है margin और padding की बाद अगर अगर अपन करते हैं तो सिर्फ margin की बाद करों left और right से ही वो apply होती है

21:05top और bottom से नहीं होती है ऐसे ही अगर अपन बात करें inline block की तो आपका जो element है वो रहेगा तो inline ही inline की तरह ही treat करेगा

21:15लेकिन वो पूरा आप यहां पर उसको block की तरह width और height और margin और padding आप उस पर set कर सकते हो तो वो आपका inline block होता है

21:26तो तीन display value उपन ने आपर देखी block, inline और inline block तो इसका मतलब जो आपका image tag है वो आपका inline block है ना कि यहां पर inline है वो तो image tag आपका inline block है

21:41जिसकी आप width और height यहां पर set कर पा रहे हो तो यह अपने पास अपनी display property वी तीन जो अपने आपर discuss करी यहां तक की चीज़ के लिए रहे तो एक बाद कमेंट करके बताओ यह असर यहां तक की चीज़ के लिए रहे इसमें कोई doubt नहीं किसी को

22:11झाल

22:41चलो, next अपने आगे चलते हैं

23:07यह अपने देखा अपने display की properties

23:09जिनकी value अपने देखी

23:11ऐसे अपने display की value आती है

23:13flags भी आता है, अपने पास अपना grade भी आता है

23:15जो आपको आगे बताने मिलाओं कि यह पूरी class का topic है

23:18flags अपना पूरा एक class लेगा

23:20grade अपनी एक पूरी class लेगा

23:22जिसमें अपन समझेंगे क्योंकि important topic है

23:24पूरे CSS का advanced topic है वो

23:26तो यह अपने अपनी display की

23:28तीन value देखी, ऐसे ही

23:30अपने पास display none

23:32एक और अपनी value आती है display none

23:34अब देखों यह display none क्या होता है

23:36display none के अंदर आपका जो

23:38element है वो completely

23:39hide हो जाता है, मतलब आपके

23:42browser के अंदर तो रहेगा

23:44वो आपके code के अंदर तो रहेगा

23:46लेकिन वो hide हो जाता है

23:47और वो space भी occupy नहीं करता

23:50कैसे, जैसे मालो मैं

23:52यहाँ पर इस image tag के बाद ही

23:53एक achievement tag में यहाँ पर ले रहा हूँ

23:55जिसमें मैंने यहाँ पर लिखा

23:57देवानशू सर

23:59यह मैंने यहाँ पर लिखा

24:01अब भी अगर आप यहाँ पर आके

24:03चक करोगे तो आपको यहाँ पर दिखाए देवानशू सर

24:06अब मैं चाहता हूँ कि

24:07इस element को मैं यहाँ पर hide करना चाहता हूँ

24:10तो देखो कैसे

24:12मैं यहाँ पर इसको target करूँ

24:14आपने S2 tag को

24:15मैंने S2 tag को यहाँ पर target किया

24:17और उसके उपर अपने

24:19अपनी display property लगाई

24:20और उसकी value मैंने यहाँ पर क्या देदी

24:22none

24:22तो जैसे आप display null लगाऊगे

24:25तो वो element आपका यहाँ पर क्या हो जाएगा

24:27hide हो जाएगा

24:28और space b occupy नहीं करता हूँ

24:30चलो पर इसको इसको इस बार वापस समझते हैं

24:33मैं यहाँ पर बोलता हूँ

24:34डिस्प्ले वन डॉट टु स्टी एमल

24:39थोड़ा सा अच्छे से समझते हैं

24:40क्योंकि important है यह भी

24:41ठीक है मैं यहाँ पर आता हूँ

24:44एक h1 टैग मैंने आपर लिया

24:45जिसमें मैंने आपर लिग दिया

24:46देवान्शू सर्थ

24:48फिर उसके बाद एक paragraph टैग लिया

24:51जिसमें lorem करके 10 का content अपने यहाँ पर लिग दिया

24:54फिर उसके बाद मैंने catch 3 टैग लिया

24:56जिसमें अपने लिग दिया अपना skill वाला

24:58फिर उसके बाद मैंने यहाँ पर एक pre टैग लिया

25:02जिसमें अपने lorem करके 10 का content लिग दिया

25:04और file को अपने आपर run कर दिया

25:07ठीक है अब ये जो मेरा paragraph tag है

25:13इसके उपर मैं लगाने वाना हूँ

25:15अपनी display property

25:16तो मैं सबसे पहले अपनी style करूँगा

25:19और मैंने बुला paragraph tag जो है

25:21उसके उपर मैंने लगाई अपनी display property

25:23और मैंने लगा दिया none

25:24तो जैसे आप display null लगाऊगे

25:26तो वो आपका element यहाँ से hide हो जाएगा

25:28और space भी open price नहीं करता

25:30ऐसे ही अपने पास एक property आती है

25:33visibility

25:34visibility property भी आपके element को hide करने के काम आती है

25:38जैसे मालो मैं

25:39इस s3 tag के उपर

25:41visibility वाली property लगाना चाहता हूँ

25:43तो मैंने s3 tag को यहाँ पर target किया

25:46और इस पर property लगाई अपने visibility

25:48और उसके अंदर मैंने value दी hidden

25:50तो visibility hidden क्या करती है

25:53आपके element को hide करने के काम आती है

25:56display null भी आपके element को hide करती है

25:58visibility hidden भी आपके element को यहाँ पर क्या करती है

26:01hide करती है

26:03दूनो properties elements को hide करने के काम आती है

26:06तो यहां पर आप देखो कि आपका element hide हो चुका है

26:09लेकिन दोनों में difference है

26:11और क्या difference है

26:12display none property से अगर आप किसी element को hide करोगे

26:16तो वो space occupying नहीं करता

26:17लेकिन अगर आप visibility hidden से hide करते हो

26:20तो वो आपका space occupy करता है

26:23मतलब वो अपना space महां से जाने नहीं देता

26:26सिर्फ hide ही होता है

26:28जैसे s3 tag skill वाला अपने लिख रहा है

26:29तो यहां पर आपको एक space दिखाए दे रहा होगा

26:32वो उसी का ही है

26:33अगर मैं इसको यहां पर visibility hidden को यहां से हटाता हूँ

26:36तो अपना वो वापस tag आजाएगा

26:39ठीक है

26:39वो tag अपने पास यहां पर वापस आजाएगा

26:42अगर अपन इसको हटाते है तो

26:43ठीक है

26:45तो यह बात होगी अपने पास किस सीच की अपने

26:47fully रख लोग में तो

26:50visibility hidden की

26:52अगर मैं इसको वापस लगा देता हूँ

26:54तो यह अपने पास इस तरीके से अपने show होगा

26:56important नहीं है

26:58क्योंकि पूछा जाता है यह question भी

27:00कि visibility hidden और display none

27:03दोनों में क्या difference है

27:04तो display none के अंदर आपका element hide होता है

27:07लेकिन space occupy भी नहीं करता

27:09और अगर अपन बात करें

27:10visibility hidden की तो element hide होता है

27:13साथ के साथ space भी occupy करता है

27:15यह अपना

27:16display none और visibility hidden है

27:19जो पढ़ने यहां पर discuss करा

27:21यहां तक की चीज के लिए रहे

27:23तो आगे बढ़ते हैं

27:25यहां तक की चीज के लिए तो एक बार comment करके बताओ

27:27यहां तक की चीज करें

27:49यहां तक की तो होएं मोटेश हां

28:19करें घ्राइब यहां तक की चीजी के लिए एक लिए पिक गरेंगे डिस्प्ले कॉंटेंट क्या होता है डिस्प्ले कॉंटेंट तकू दिस्प्ले कॉंटेंट जो है

28:47वो काम आता है

28:48advanced property है यह अपने

28:50CSS की

28:52जैसे मालों कोई parent element है

28:54उसको remove करके उसके अंदर

28:57के content को direct render करना चाते हो

28:59ठीक है तो

29:00वहाँ पर अपन display content यूज लेते हैं

29:03जैसे मालों अपने कोई due लिया

29:04उसके अंदर अपने paragraph tag लिया

29:06ठीक है और उसके

29:08अंदर जो अपने

29:09अपना due के अंदर जो paragraph tag लिया है

29:12उसको अपने render करना जाते है तो

29:14वहाँ पर अपन display content यूज लेते हैं

29:16अभी के लिए इसको रहने दो

29:20आगे समझाऊंगा इस property को जब यूज आईगी कई पर

29:22ठीक है

29:23display property blog and inline elements

29:30दोनों पर apply होगी न

29:32हाँ जिस भी element पर आप apply करोंगे उसके पर अपनाई होगी

29:35गैस करें कि

29:39buts are none and display hidden

29:41use कहां आती है

29:43ये use कहां आती है

29:45ये use आती है जहां पर भी

29:47आपको किसी element को hide रखना है

29:49फिर उसके बाद आप तिकाना चाते हो

29:51ठीक है कैसे

29:53देखो मैं समझाऊं आपको

29:54डिस्प्ले नन कहां आती है

29:56जैसे अपना आते है

29:58किसी भी website पर

30:00sold store पर आता हो मतोड़ी

30:02the sold store

30:05ठीक है इसके उपर आता है पन

30:08अभी अपने पास

30:11अपनी नवबार इस तरीके से आ रही है

30:12मैं इसको जैसे inspect करूँगा

30:14कोई notification नीची inspect करो

30:16जैसे आप इसको inspect करोगे

30:19तो अभी आपको इस तरीके से दिखाए जरी है

30:22जैसे जैसे करते जाओ

30:23करते जाओ

30:24यहाँ से आपका वो guide हो गई

30:27सारे चीज़े है

30:28इस नवबार में से वो चीज़े यहाँ पर गई हो गई

30:31तो यह कैसे हो रहा है

30:33यहां पर display property तो है, उसको यहां से खटा दिया उसको, फिर उसके बाद यहां पर जब पर उसको कर रहे है तो इस तरीके से पने कोई show हो रहा है, चलो कोई छोटा सा example समझाता हूं आपको एक छोटा सा example लेते हैं, जैसे मालो मैं यहां पर एक div ले लेता हूं, मैंने यहां पर

31:03आपन यहाँ पर ले लेते हैं जिसमें आपन कहलते हैं होवर मी और एक पैरेग्राफ टैग में यहाँ पर लेता हूं जिसमें लारेंग बरेगे आपन 20 का कॉंटेंट पास कर रहते हैं वेटे मिनट गाइस

31:33ठीक है तो यहाँ पर अपने क्या किया अपने यहाँ पर अपना एक बॉक्स लिया ठीक है अब अपन इसको देखो समझते हैं मैं इस पैरेग्राफ टैक को टार्गेट करता हूं इसको तो कमेंट करतो यह जो भी करता हूं इसको अटा दो एक बार के लिए ठीक है अभी देख

32:03तो भी आपने content लिखाया हूँ, यहाँ पर इस तरीकी से आ रहा है, चीक है, अब मैं यहाँ पर इसको फोड़ा सा styling कर ले रहा हूँ ताकि फोड़ा सा अच्छा लगे, मैं करता हूँ कि मेरा जो h1 tag है, उसको तो अपन यहाँ पर background color दे देते हैं, चीक है, और वो मैं यहाँ

32:33डिस्प्ले प्रोपर्टी है वो आप यहां पर इलाइन कर लेता है किसकी एच्वन टैक की ठीक है तो यहां पर यहां पर यहां पर यहां पर एक बार के लिए टार्गेट कर लेता हूं

32:52अब मैं यहां पर इस परग्राफ को टार्गेट करता हूं

33:21इसको अपनी बैक्राउंड कर दिया और नेमं और यहां पर इस मैं

33:26उसको पर देजिदा हुआं पने पर इस पर पर शो तो पर यहां पर शो और उसके लावा

33:46मैं इसकी phone size change कर देता हूं phone size अपन कर देते हैं आप पर 35 परफेक्ट यह अपने बाजस तरीके सा रहा हो अब देखो मैं यहां पर इस paragraph tag के उपर लगा रहा हूं display नल इस paragraph tag के लगा रहा हूं display और मैं value लगा रहा हूं नल तो जैसे मैंने display नल लगाई तो आपका element यहां पर क

34:16लेके जाओं जब मैं इस box के उपर cursor लेके जाओं ठीक है तो यहां पर condition लगा दो यहां पर बोलो box अगर मैं उसके उपर work करूँ तब जो मेरा paragraph tag है उसकी display property यहां पर क्या हो जाने चाहिए initial क्या होती है block ठीक है तो वो मैंने यहां पर कह दिया तो देखो जैसे आप इस प

34:46तो जैसे मैं इस पर cursor लेके जाओंगा तो यहां पर वो आपका element आपको शो होगा initially display property none है इसके बाद अगर आप जिसे मान लोग कोई भी content लेते हो जैसे मैंने paragraph tag नहीं लेके एक tag यहां पर ले लिया या फिर

35:00एक tag ले लिया जिसमें मैंने paragraph content भी दे दिया ठीक है तो वो content भी आ जाएगा जब आप इस पर over करोगे तो वो इस तरीके से यहां पर लेगा क्योंकि display आपने यहां पर जो property लिए none उसके अंदर वो space occupying नहीं करता जैसे मैं यहां आपर आता हूँ और मैं display none को तो हटाता ह�

35:30जब अपन cursor लेके जाएंगे तब यहां पर display block ना करके अब आपको यहां पर क्या करना पड़ेगा अपनी visibility property ही लगानी पड़ेगी और visibility के अंदर अपनी आपर क्या कर देंगे अपना

35:41visible ठीक है visibility के अंदर अपने यहां पर क्या कर देंगे visible तो यह जो property है इसके अंदर वो space रग रखाया उसने है अपने content का space है जब आप इस पर लेके जाओगे तब आपको तखाय देगी ठीक है तो यह अपने पास अपनी display की properties अपने देखी display अपने देखा inline block none visibility hidden इस पर अ

36:11कि जोभी डाउट है उन पर discuss करने वाले हैं

36:13कोई डाउट नहीं किसी को

36:35कि फाइल शेयर मत करो आपको

36:40है कि संब प्री टैग का यूज करते हैं प्री तैग को इसा content जहां पर लिख वाना है

37:06यहां पर चुब भी वह फॉर्मेट दे उसी फॉर्मेट में मेरे पास पूरा कॉंटेंट आना चाहिए वहां पर पर उसको यूज कर सकते हैं

37:12क्लियर है सर सर डेट案 10 के वीडियो में अटेंट पॉइंट यह कि दिया गया है उसका सटेंट जो देवान शुट सर मेंचन करना है क्योंकि रिक होदिंग ओफ होगयती तो उसमें नेपर बताया नहीं

37:29रिक होदिंग हूँ थी

37:32और हमес

37:34कि

37:42आशिश कुमार ने कुछ भीजा है और यह क्या है वेलकॉन टू माइफेशन स्टूर, वोम प्रोड़क्ट सर्वेस, प्राइवेसी पॉलेसे बाउटस ठीक है एच्छा है इसमें आपने लीनियर ग्रेडियन लगा है अच्छ होना है नाइस

37:54एक्सप्रेस.js किस काम आता है एक्सप्रेस.js जब आगे पढ़ेंगे तब आपको बताऊंगा अभी शॉर्ट में बताऊंगा एपिई आइस के लिए पन यूज लेते हैं

38:07प्रेंट और वेकेंड की बीच में कम्यूनिकेशन के लिए अपने एक्सप्रेस.js को यूज लेते हैं अपने सर्वर के सैटप के लिए

38:16सब प्रोजेक्ट क्या बनाने दिये हैं अभी कोई भी प्रोजेक्ट मेंने नहीं दिया टास्क दिये थे आपको छोटे छोटे वो टास्क आपको क्रियेट करने हैं

38:25उसके अलावा अपने जो असाइमेंट्स है उसके इंदर आपको आगे के और असाइमेंट्स आपको क्रियेट करने हैं वो में बता जाता हूं कौन से क्रियेट करने हैं

38:37करने में यह वाला में आपको दे ही दिया था यह पी दे दिया था यह भी मैंने आपको दे दिया था एक आपको यह लोग इन फॉर्म में पर क्रियेट करना

39:01हमाने मिलेन को बनाना है छी अ सब्सक्राइश जहें लेना है उसके अंदर आपको यह लॉग-म फॉर्म है एकी इंपूट लगाना है दूसरा इंपूट पासफ़ोड का लगाना है फिर उसके बाद रिमेंबर

39:15remember me का एक checkbox लगाना है, forget password का anchor tag लगाना है,

39:20login का एक button लगाना है, जिसमें linear gradient लगावा है, not a member, sign up now का ये लगाना है,

39:26same linear gradient लगावा है, login form के background में, और login का button के अंदर, चिक है,

39:31तो ये आपको create करना है, सिर्फ ये ही, इसके अलावा ये आप अभी create नहीं कर सकते,

39:57इसर सभ मिट कहां पे करना है टास्क

40:07कि अनमोल करें और सर मंड़े तक प्रोजेक्ट सभ मिट कर दूँ है क्यों से प्रोजेक्ट कि आप बात कर दो

40:14मैं इस शीवम ख़ें सब शेर कर दो इंग उसे में आपको इसमेरि जुन मैं आपको

40:21लिंक शेयर करा है

40:22तो वहाँ पर आपको मिल जाएगा

40:24मैंने आपको बता था

40:25Dailymotion के उपर अपना

40:27GitHub का भी मिल जाएगा और दोनु चीजों का

40:29URL में मेंशन करवाता हूँ

40:31आपको वहाँ पर जाके आप चेक कर सकते हूँ

40:34Dailymotion पर आना है

40:35वही स्किल वाला के उपर ही आना है आपको

40:37जैसे मैं यहाँ पर आजाता हूँ

40:39अपने स्किल वाला के उपर

40:40यहाँ पर आने के बाद

40:43आपको

40:44प्लेलिस्ट चेक कर लो या फिर यहाँ ऐसे चेक कर लो

40:48जैसे मालो अपनी जो ग्लास हुई थी

40:50वो यह वाली class थी ठीक है तो इसी के अंदर अगर आप चैक करोगे तो देखो यहाँ पर description के अंदर यह रहा

40:58github का url यह रहा assignment url यहाँ से अगर आप इसको क्लिक करोगे तो आपने assignment url पर पहुंचाओगे

41:04ठीक है तो assignment url मैंने share कर रहा है यहाँ से जाके access कर ले ना उसको

41:20what is the difference between display none and visibility hidden display none के अंदर और visibility hidden के अंदर पहले बात तो करें दोनों में equal चीज मतलब same चीज क्या है

41:32दोनों के अंदर अपने elements hide हो जाते है अब difference की बात करें तो दोनों में difference यह है कि display none के अंदर आपका element जो है

41:40वो space occupy नहीं करता और visibility hidden के अंदर आपका element space occupy करता है तो यह difference है

41:46sir ऐसे assignment किया है as a rough ठीक है सही है यह लेकिन वैसा same बनाना था आपको

41:54sir menu कब बना सिखाएंगे कौन सा menu sir reply please

42:03sir once again show the on text over and then rotate for 180 degree please

42:13text over and then rotate for 180 degree मतलब क्या करना चाला हूँ अपने text ले और उसको rotate करवाना है

42:23ऐसा कुछ

42:33text को rotate कराने की बात कर रहे हूँ कि आप एक बार apply करना है

42:48पर बताते हैं यह सर्वरिंग और टेक्स्ट इस्शू प्रोटेट ठीक है सिवाक्षी आपका मेसेज में वापस देखता हूँ एक बार यह जो टाउट है इस पर पर डिसकस कर लेते हैं

43:13कि आपको टेक्स्ट की क्लास टेस्टी एमें आप यह कहना चाहरे हो कि जैसे मालोम ने आपर कुई भी एक टेक्स लिया और उसको आपको क्या करवाना चाहते हों

43:27करवाना चाहते हूँ जैसे मालोम एक एक टेक्स्ट लेता हूँ और उसके अंदर अपन लिख देते हैं देवन शू ठीक है इसको आप रोटेट करवाने की बात कर रहे हूँ परफेक्ट मैं आपर इसको रन कर देता हूँ

43:43अब यहाँ पर क्या करना है इस टेक्स्ट को मैं यहाँ पर रोटेट कर वान चाता हूँ तो इसको एक क्लास देदो और क्लास आप टेक्स्ट ही देदो अभी के लिए

43:54इसको एक बैग्राउंड कलर देते हैं ब्राउन देता हूं भी के लिए ठीक है अभी के लिए अपन ब्राउन देंगे अब टिक्कत तो यहीं पर आ गई कि यह पुरा ब्लॉक लेवल एलिमेंट है ठीक है इसको वेट और हाइट सेट करो या तो इसकी

44:15इसको ट्रान्सफॉर्म करवाना है और ट्रांसफॉर्म में मैं यहाँ यहाँ पर चाहता हूँ रोटीट चाहता हूं छोडिया और यहाँ पर

44:43इसके उपर नेके जाता हूं तिक्कत क्या रही है इस तरीके से बीगे रहा है कोई दिक्कत नहीं है यहां पर जो आपने लगाया है काम पर पहले तो इसको मार्जिन देदो

45:05अब देखो यहां पर यह इस तरीके से रोटेट हो रहा है अब आप चाहते हूँ प्रेग्राम कलर रटाओ एक फार के लिए इस पर जैसे भी आप चाहते हूँ ऐसे हो जाया रही है अब यह पूरा ऐसे क्यों हो रहा है क्योंकि डिस्प्ले प्रोपर्टी इसकी ब्लॉक है मै

45:35मैं इसको इसे रोटीट कर वाद हूँ यहां पर इस पर करसर रखो गे तब ही रोटीट हो गाजागा कश लोगे वे एक इसमें एसमें इसमें रोकेट साइंस नहीं है सिभकशे करेի सर मैं वीजा फीलिंग में जाइनिंग कर रही हूँ म Quốcडे से तो मैं इंटर्ञडिशिप

46:05जाओंगी साथ साथ में फ्रिलांस करके

46:07फ्री ओफ कॉस्ट तो मेरे बेसिक

46:10क्लियर हो जाएगा

46:11देख आप चूभी वीजा फिलिंग में

46:13जोईंग कर जो आप अच्छी बात है

46:15बदा ही हो इस च्वीच के लिए तो

46:17और आप बोलो कि इंटर्शिप जो है

46:19अपनी ऑनलाइन ही रहेगी

46:21मतलब उपने जो

46:22यह पूरा बैच है

46:24यह पूरा बैच के अंदर जो फाइनल प्रोजेक्ट होगा

46:27वो ही आपका इंटर्शिप प्रोजेक्ट होने वाला है

46:29चीक है

46:30तो कोई दिक्कत नहीं है बस उस प्रोजेक्ट को

46:33और एंड तक पूरा कॉर्स कंप्लीट करना

46:35वो ज़रूरी है

46:36फिर आप फ्रिलांसिंग कर सकते हो

46:37आपको और भी प्रोजेक्ट उससे बनाने पड़ेंगे

46:40फ्रिलांसिंग कर सकते हो फिर आप

46:41साइनात करें साथ

46:45इन लेइन बॉक पर पैडिंग लग जाती है

46:48और ऩे वाल ह�नात कर सकते हैं

46:49तर इनुक्ष्ण लेइन बॉक पता अपर पार प्रोजेक्ट न की बैखने

46:52गते हैं क्या ऐल डारएक्षिन से

46:54अशरान ब्लोग पर मार्जेक्ट पैडिंग शासारा है

46:58इसे बताता हूं मैं तो यह तुम्हें को पता है क्योंकि अगर जैसे आप inline block पे लगाओगे margin और padding की बात करें तो उस पे तो लगेगी

47:07ठीक है

47:10दो जैसे block level element है, line break, yes, width और height के अगर अगर अपन बात करते हैं, yes, बिल्कुल apply कर सकते हैं

47:22basically common use अपन करते हैं, जैसे अपने sections बनाने, अपने div यूज लेने, वहाँ पर अपने उसको यूज करते हैं, अगर अपन बात करते हैं, inline की, तो width और height उस पे site नहीं होती, जैसे मालो आपको कोई text है, या फिर कोई link आपको create करना है, वहाँ पर अपने width यूज लगाना नहीं

47:52tab पे या फिर किसी चीज पर अपने को show करना है, तो वहाँ पर अपने display नन को use लेते हैं, चीक है, तो जैसे जैसी चीजे अपने पास difficulty आएगी, वैसे वैसे अपन इन चीजों को use करते रहेंगे, depend करेगा अपने task के उपर, कि क्या task अपने पास आ रहा है,

48:05आज जीज करें home products यह वाला menu, यस बिल्कुल यह आगे बनाएंगे अपन, आज जीज करें सर एक बाद table tag explain करना, table tag basically अपना table ही होता है, table tag बहुत easy है, अपने पास अपना table का tag आता है, फिर उसके अंदर अपने पास एक रोग अपन occupy करते है, फिर उसके अंदर table की heading पास कर

48:35यह first row अपने लिए फिर उसके बाद second row होती है, जिसमें अपन table का data fill करते जाते है, जितनी row लोगे उसके अंदर table का data fill करते जाओगे, जितनी row आप लेते जाओगे उतना table का data आप में आपर fill करते जाओगे, जिसे मैंने यापर एक और rule ले ली, तो यह tr कहा है, table row है यहा�

49:05table one है, यह आपकी table की heading है, बाकि आपका table का data है, अन्मोल कह रहे हैं कि sir, window 11 में phone link कैसे काम आता है, यह दो out of syllabus question पूछुरा आप, phone link, आप उन्हें phone को link कर सकते हो, उसके अंदर, और फिर आपकी जो भी call है, सब चीज़ा आप उन्हें laptop से अटाइंड कर सकते हो, उसके अला�

49:35आप कुछ भी share कर रहे हो, images, videos, कुछ भी share करना चाहते हो, अपने laptop में तो और डाइरेक्ली share कर सकते हो, without किसी data cable की use लिख के, वैसे इतना सा है, phone link अपने पास यहां पर आता है, यह रा phone link, इसके दिरो उतने phone को attach कर लेना और use कर लेना, ठीक है, और अगर बहुत better use करना, �

50:05चीज़े easy हो जाती, क्योंकि iOS में बहुत अच्छे features है और easy to use है, yes, attendance का point, attendance के point one के अंदर आपको fill करना है, block, attendance के point one के अंदर आपको fill करना है, block,

50:35और भी कोई doubt है, तो अपने doubt पूछिए, जो भी doubt आपको लगते हैं,

50:49तेखो अगर doubt नहीं आ रहे, तो या तो reason यह हो सकता है, कि मेरी बढ़ाई भी सारी चीज़े आपको बहुत अच्छे समझ में आ रही है,

51:12या फिर reason यह हो सकता है, कि आप चीज़े देखी नहीं रहे, या फिर reason यह हो सकता है, कि आप doubt पूछना ही नहीं चाहते हैं, कुछ भी reason हो सकता है,

51:26ठीक है तो अगर पहला रीजन है कि आपको चीज़े बहुत अच्छे से समझ में आ रही है तो तो यह तो बहुत अच्छी बात है

51:33दूसरा रीजन है कि आपको प्रैक्टिस ही नहीं करें चीज़े नहीं देख रहे हैं तो वह तो बहुत गलत बात है

51:38ठीक है, सर एक बार टास्क बता दीजिए फिर से, टास्क जो पहले के दिये थे, इजी टास्क है, बहुत इजी टास्क है, जो आपको बनाने हैं

51:56पुछ कि टास्क है, जो आपको कंप्लीट करना है, उपने आपको बताये मिते हैं, एक तो यह बिजनिस डेवलोप्मेंट वाला था, इसमें कुछे नहीं करना है, आपको एक डिव लेना है, उसके अंदर एक ओड डिव लेना है, और उसमें एक ओंटेन से बस ऐसी है, यह क्य

52:26मैंने टेबल बनाना से कई भी आ है इसमें क्या करना है आपको एक डिव लेना है आपने दिव लिया उसको सेंटर करने के लिए मार्जिनों को लगा दो उसमें सारह content फिल करना है सारे टैग आपने पढ़ रखे है सब चीजे आपने लुख करना है यह लोगिन फोर्म मेंने द

52:56पेंच का structure गया बनेगा फिर उसके बाद उस पे CSS लगाना apply करो

53:01सब flowdesk का phone नहीं मिल रहा कोई बाती same font यूज नहीं करना

53:06जो भी font आपको similar सा लगे हो यूज करना है जरू नहीं है same font आपको लगे

53:12कोई सा भी similar सा font आप यूज कर सकते हो

53:15रवी करें यह सब बना चुका हूँ जो आज बताया है बस वो आज बताया हो तो बहुत easy है

53:25इसके अंदर आपको क्या करना है इसके अंदर आपको सबसे पहले एक div लेना है

53:30फिर उसके अंदर आपको एक heading लिक नहीं login form जिसमें चारो तरफ padding लगी भी है

53:36और इसके उपर rounded border लगी भी है border radius लगी भी है एक आपने input लेना है दूसरा एक और input लेना है

53:45फिर उसके बाद remember me का एक check box लेना है forget password का एक anchor tag लेना है

53:50जिसमें text decoration लन करके आपको उसकी underline अटाडी है

53:54login का एक button लेना है जिसमें padding लगी भी है और आपका gradient भी लगा हुआ है

53:59not a member का एक यहाँ पर paragraph लेना है जिसमें एक anchor tag होगा sign up नम का

54:05और जिसके click करते sign up के page पे चला जाना चाहिए अगर नहीं बना रखा तो नहीं बेजना है

54:10पस कितना सा गाम करना है

54:24और कोई doubt किसी था

54:28no doubt चीक है

54:52चला अब आपको attendance का point 2 भी बताता हूं

54:54attendance के point 2 के अंदर आपको mention करना है

54:57क्या mention करना है

55:01attendance के point 2 के none mention करना

55:05कुछ भी नहीं

55:06sir आपने कोड रखा है github पे

55:12yes बिल्कुल code रखा है मेने github पे

55:15आगे

55:19वो run नहीं हो रहा हूँ

55:34वो run नहीं होगा वहाँ पर run नहीं होगा

55:36उस code को वहाँ से run करने के कोशिश मत करना है

55:39वो सिर्फ आपके लिए code है class के अंदर क्या क्या चाहिए आपने देखी उसको use करना है

55:45वहाँ से run नहीं करना आपने लोकल सिस्टम के अंदर जो आपका

55:49VS code है वहीं से run करना उसको

55:51मुकेश ओर सर्व सब्मिट भी करने है assignments यह बिल्कुल assignments आपको बेजने भी है

55:59पहले आप बना दो फिर बताओंगा मैं कैसे बेजने है

56:03assignment बना दो पर ले

56:05स्विद्रा गए रहे हैं कि VS code पर हीट नहीं रन हो रहा

56:18VS code आपका perfect चल रहा है VS code परफेक्ट चल रहा है तो बहुत अच्छी बात है

56:24अगर आप उसको यहां पर रन करने की कोशिश कर रहे हो जैसे मालूप मैंने आपको code दिया था उसको वहां पर उसके development

56:31environment पर रन करने की कोशिश कर रहे तो वहां नहीं होगा फिर उसकी अलग process होती है

56:36जैसे मालूप ना batch कोईसा भी चला दोई

56:40पो ठीटे में यहां पर आगे बोलता हुँं की आव इसको development पर रन कर एक को रन हो जयेगा अब यहांपर अगर आपि आपि और यहांपर लावर

56:56कटीम कोई कभी की है यहां नहीं हो अच्छाए यहां नहीं होगा

57:02specifically

57:07करना उसकुर्ण

57:08ठीक है

57:26ठीक है चलो अगर आपके कोई भी डाउट नहीं है तो आज की ग्लास अपन इतनी रखते हैं

57:31मिलते हैं फिर अपन अपनी नेक्स्ट ग्लास के अंदर

57:33ठीक है गाइस

57:35ओके थांग यू सो मच

57:36Saturday Sunday बहुत अच्छी प्रैक्टिस करो क्या पन्दीरे धीर आगे बड़ते जारें

57:41धीरे धीर चीजेशे बड़ती जाructures जाएगी और इंट्रेस्टिंग

57:45बस प्रैक्टिस करते हैं ताके चीजे इंडेर होती रहें

57:48विलते हैं फिर अपन अपनी नेक्स्ट कलास के अंदर

Be the first to comment

Add your comment

💻 CSS Display Properties Explained | Block, Inline, Inline-Block & None

Category

Transcript

Be the first to comment

Recommended