Learn CSS Box Model & Box Sizing + Button Design Tutorial

Name: Learn CSS Box Model & Box Sizing + Button Design Tutorial
Uploaded: 2025-12-06T06:23:49+00:00
Duration: 1 h 5 min 5 s
Channel: skillwaala
Description: 👨&zwj;💻 What You’ll Learn in This Class:<br />✅ What is the CSS Box Model and how it works<br />✅ Understanding Padding and how it differs from Margin<br />✅ How to create and style Buttons using CSS (colors, hover effects, borders, radius)<br />✅ The box-sizing: border-box

skillwaala

2 days ago

👨‍💻 What You’ll Learn in This Class:
✅ What is the CSS Box Model and how it works
✅ Understanding Padding and how it differs from Margin
✅ How to create and style Buttons using CSS (colors, hover effects, borders, radius)
✅ The box-sizing: border-box

Category

📚

Learning

Transcript

Display full video transcript

00:00:00हेलो गईस गुद इवनिंग एवरीवन गुद इवनिंग सिबूल अजै अछाइनात सारो सिबूल सूरप सूरज क्या इस वागया क्या कमेंट कर रहा है अज गरेसार आज लिंक नहीं

00:00:23है कम्यूनिटी में किसीच का है स्वारो कर रहा है हेलो सर येस्टरेटे क्लास रिकॉर्डिंग नॉट येट अप्लोडेड यस कल वाली क्लास शायद अप्लोड नहीं हुई यह मैंने भी चैक किया तो कल वाली जो क्लास है वह आपकी कल अप्लोड हो जाएगी मतलब आज वाल

00:00:53कैसे है सर और तब्यत थीक है येस बिल्कुल थोड़ी ठीक है सई हैज बिल्कुल एक्दम बडिया गुड़ीवनिंग गुड़ीवनिंग बड़ी नं शुभम गाुड़ीवनिंग कृश्य क्रिश्चप्ट टुरीवनिंग रभी ठीक है तो ज olan से वह आपको कल मिल जाएग

00:01:23तो चलो आज अपन डिसकस करते हैं अपने आगे के टॉपिक्स के उपर आज आगे की चीजू के उपर ठीक है चलो वाई क्लास स्टार्ट करते हैं अपन आजाते हैं अपने

00:01:44एक बार सब response कर देना कि screen and voice दोनों के लिए रहे

00:02:04ठीज के तो देखो कळ वाली कलास में अपर ने क्या डिस्कस करने राता

00:02:16उसी में अगे डिस्कस करने वाले अपना जाते क्में MILL ye AIS कोड की उपर ठीक है और वियों स्कुर्ण��서 के आहिके अगे और मिस्टी achievement mo in

00:02:26में भी margin और padding भी discuss कर लेती था थी तो अपने margin के उपड़ डिसकस कर आ

00:02:32यह प्रवादिंग पर कोई discussion नहीं किया अपने सिर्फ margin पर discussion किया था

00:02:36और margin अपने देखी थी margin क्या होती है दो containर्स या दो elements की

00:02:43अगर अपने को spacing करनी है तो उसके लिए margin अपन यूज ले देते हैं

00:02:46सेम अपने पास अपन पैडिंग की बात करते हैं

00:02:49तो syntax तो सेम ही रहने वाला है जैसे मैंने margin की short end property बताई थी

00:02:53जिसमें अपन margin के अंदर 4 value pass कर रहे थे तो direction wise लग रही थी

00:02:57फंदर तीन value pass कर रहे थे तो उस रहाप से लग रही थी दो पास कर रहे दे एक value

00:03:01� Michigan यहां पर अपने पैडिंग के उपर discuss करते तो जल्दी से अपन यहां पर अपनी एक class

00:03:10बना लेते हैं जिसको मैं यहाँ पर कर देता हूं प्ली कि अब देखो यहाँ पर अपन दो बॉक्स बना लेता हूं एक बॉक्स बना लेते हूं सेम ऐसे ही अपन

00:03:34यहाँ पर अपना Box 2 भी बना लेते हैं और दोनों को में स्टाइलिंग कर लेता हूं मैं नहीं पर क्या किया

00:03:41स्टाइल किया Box 1 को भी मैंने यहाँ पर टार्गेट कर लिया और उसको पने एक बैगराउंड कलर दिदि या जो चैसे

00:03:48और इसको रन करते हैं तो अपने पास एक box 1 बन के आने वाला है

00:04:02अपने बास बन के आगया सेम ऐसे ही box 2 को भी में यहापर create कर लिया एक background

00:04:10को इसको देते हैं जुपन यहाँ पर जैते ब्राउन चीक है उसके अलावा विर्थ में आपर इसकी सेट कर देता हूं वह पंदेते लाओं ऐसे ही में आपर

00:04:19की हाइट साट कर देता हूं वो मैं यहांप देता हूं 200 नृट सेकंड बॉक्स

00:04:22अपने यहां पर जंपर दोन भी लागा दो चुलो इसके उपर मैं बॉरडर बनाः उन

00:04:28बाइब नाई बादर में बना कि आप 5 पिक्सल की बनाओ और यहां पर ब्लू कलर की एक

00:04:34बोडर्डर और बना देता हूं फाइब ढ Wrestle की सॉलिद और गिरियन

00:04:48कलर की बाड़र बना रहे हैं अब मारचन अपने देखा थाuma जिसी अपन अपने देखी त है, है मैं मैं इस संहें पर मारजन लगाता हूं और मैं ने

00:04:59पर margin pass करी जैसे 20 pixel की,

00:05:04तो all direction से 20 pixel की margin इस box पर apply होगी,

00:05:07same ऐसे ही, box 2 के उपर भी मैं हापर क्या लगाता हूं,

00:05:10margin लगाता हूं और margin मैंने 20 pixel के apply कर दी,

00:05:14तो इस पर भी 20 pixel के margin अपनी apply होगी,

00:05:17यहाँ पर यह क्या होगी? overlap होगी,

00:05:18तो यहां पर आपने पैडिंग के उपर तो इसके अंदर कॉंटेंट लिखेंगे तब ही आप पैडिंग को अच्छे से समझ पाओगे जैसे मैं यहां पर लॉर्म का

00:05:38नंचाठेंट में डिगोड़ यहां में पाइडिंग क्रेंग करता हूं जैसे मैं तरह ऑपनी वह खाये हैं अपने

00:05:52प्सक्रिश दॉग्र क्राइड ऊंक आप एक पैडिंग के अ� Menu लिख़ेंड और लटाप राइटए

00:06:08सेपरेट लगानी है और पेडिंग प्रोपर्टी लगा के अपने बेल्यव स्कते हैं जैसे मालो मैं चाहता हूं कि मैं Dong

00:06:17इए Sum

00:06:20टॉप से आफ 50 पिक्सल की फैडिंग कर चैंज अलावा राइट साइड जीनों रख लेना और प्रोंसाईड

00:06:28साइड भी जीरो रख देना तो मैंने सिर्फ ये बोला कि टॉप साइड 50 पिक्सल की आप पैडिंग लगा देना तो इसके उपर टॉप से 50 पिक्सल की अपनी पैडिंग यहाँ पर एपलाई हो गई चीक है इस पर टॉप से यह पैडिंग अपने राइट साइट से तो राइ�

00:06:58करना है तो बॉटम से अपन क्रियेट कर देंगे और ऐसे ही अगर में को राइट से क्रियेट करना है तो राइट से तरीके से क्रियेट कर देंगे तो इस तरीके से अपन यहाँ पर अपना ट्रांस्परेंट स्पेस अपन क्रियेट करते हैं अपने पैडिंग के इंसाइड �

00:07:28एकि हूं ने को बैने लकुपाना रहा हूं कि मैं यहां पर लगाना चाहता हूं आसपने civilisation यहां

00:07:40पैक्स

00:07:465308 एक से माल्यों आप लगाना चाहते हूं मैं यहां पर बोल रहा हूं कि आप事 कि आ까

00:07:52�這個是 Dude

00:07:55यह कर दो

00:08:03जिए तो तो अपने अवकंटने यहां पर पास कर दी तो है इती पिक्सल। हो कहां लग रही है वह आपके लेफ राइट

00:08:10पलग लग। होता है तो अपने मारजीन और पैडिंग के उपटर डिस्कस कराता किंगे कर लीइन होता है

00:08:20तोा उसके outside जो transparent a space होता वह आपके margin होती है और

00:08:24padding क्या होती है border के inside जो transparent space होता है या फिर एक

00:08:27content के चालए तरब इस प्डेशिन करते है वो � award को ए जूम करेंगे

00:08:35की border है तो वहां पर border के अदर जो spacing या यग और बौडर के

00:08:41Outside जो spacing रहेगी वो आपकी के रहेगी यहां पर margin रहेगी तो यह margin और heading वाला concept कि आपको clear है margin यहां पर किस तरी के से use करते हैंison

00:08:53यूज़ करते हैं एक बार बता दो यह सर पैडिंग वाला कॉंसेप्ट भी किलिए रहे पैडिंग किस तरीके से यूज़ करते हैं और कहां पर यूज़ करते हैं

00:09:00ठीक है

00:09:18लुट इवनिंग शीव के आशी में ऊसिवक्षी नाम नहीं है। अस्पाग Cannon

00:09:33ग्यूशन

00:09:44टेका

00:10:12टेका

00:10:14कर दोनों बॉक्स आपस में क्यों चिपक जाते क्योंकि कोई भी मार्जिन पैडिंग नहीं रहती है अपने बॉक्स के अंदर बॉड़ी के उपर अप्लाई रहती है खाली

00:10:25अलो बईन आपन चलते हैं अपक्स आलों मैं आपको बोलू कि कुछ बनाना हो मेंसे

00:10:38बड़िस्टॉर की यहां पर आता हूं और अपन कोई भी बटन क्रियेट करना ना है कि इस भी चीछ का ही मोट्री स्टोर के उपर

00:10:49के लिए ठीक है जैसे मैं sold store के पर आ जाता हूं और अपने यहां पर आते हैं अपने login वाले के उपर जैसे

00:10:57proceed वाला बटन मेरे को यहां पर बनाना है या फिर registration आप करते हो तो यहां पर देखो यह register वाला

00:11:03बटन म्योंиков तो कैसे बनाओंगे तो बटन तो आपको पता आए बटन आपके पास

00:11:07है जो बटन हदा यूज़ करते हो च्शें जो आप यहाँवर प्रेट कर लोगे अब बड़न मनाओंगे तो बटन तो वेजिग आपके

00:11:15लेकिन अपने को क्या करना है यहाँ पर अपने को पहले टेस कस बनाना किया on

00:11:23button.html यहां पर अपन बटन बनाते हैं अब में को वह सीम सा बटन बनाना है तो सबसे पहले मैं यहां पर क्या लूँँँगा अपना button tag और button के अंदर अपन कहाँ आप

00:11:33प्रोसीड चीक है मैंने यहां पर बटन पर क्या कर दिया प्रोसीड चीक है रजिस्टर का बना लेते हैं चलो रजिस्टर वाला बनाते हैं

00:11:43कि रजिस्टर वाला बटन मेरे यहांपर सीम सा क्रियेट करना है तो सबसे पहले अपर इस फाइल को

00:11:53रन कर लेते हैं तो यहां पर आज़ाओ और इस फाइल को रन कर लो तो अब भी अपने पास क्या होगा एक बीसिक सा नॉर्मल सा एक बटन

00:12:00लोसे सब्सक्ताइब और और उसकोціंग ऑपनेदर ल지만 आपक यहां पर में ने नहीं हैं

00:12:10Himself सब्सक्राइब करें में भूटिक आपने तर कि में उसको एक बैझ्राईंड कलर पने दिया अब मेरे को सेm

00:12:23भूसके लो है यान है नहीं है, तो एक टूल है जोंशुकार लेते हैं, उसके थुर आप कलर को पिक कर सकते हैं, हाला हकि है इन्सपेक्ट करके भी ले सकते हैं

00:12:42आप कलर लेना चाहूं तो जैसे आ इंस्पक्त करा और इंस्पक्त करके इस बुट्टन को मिं आप

00:13:08यहां पर लगाना है तो मैंने यहां पर इसको पेस्ट कर दिया तो वह बटन के उपर वह बैग्राउंड कलर लग जाएगा इंस्पेक्ट करके भी ले सकते हो कोई दिक्कर नहीं है लेकिन अपने वास एक टूल भी आता है जिसके तूर आप कलर को पिक कर सकते हो या फिर किसी

00:13:38कुछ चैक करना आप एक बार जैसे मैं इसको इंस्ट्राल कर लेता हूं एक बार के लिए इस्ट्राल होने देते पन इसको एक बार

00:13:50कर दो

00:13:55कि

00:13:59कि

00:14:01कि

00:14:03कि

00:14:05कि

00:14:13कि सूरज करें कि सर्वी कैन यूज करम एक्टेंशन फोर दिस ना तूपिक ट कलर येस बिलकुल क्रॉम एक्टेंशन भी आता कलर करका आता है देख आपकी चोईस है

00:14:24कि अच्छा है जैसे मालो आप यहां पर आओगे और अपने क्रॉम के जो भी एक्टेंशन है जैसे मैं आपर मैनेज एक्टेंशन करता हूं और यहां पर

00:14:32है तो कलर आपको करना है तो यहांपर कर सकते हैं कौन सा था यह वाला ठीक हाथे horses pięt

00:14:54कों सा आए यह वाला चाहित रोगेट करा doesn't call the Divine Systems

00:15:11एक्षेंशन हें गरता है सिर्फ एक ही नहीं है और भी

00:15:15है का टरह और अब Ouais यहाँ बैस्ट लगे ने कललर कर लगे अब

00:15:23अब देखो यहां पर जो अपने इंस्टॉल करा वो तो अपने पावर टॉइज इंस्टॉल करा था अपन उसको देखते हैं यहां पर देखो पावर टॉइज में कलर पिकर का ओप्शन यह आपको देता है अगर आपको कोई भी कलर पिकर यहां पर लेना है तो ठीक है जैसे म

00:15:53कुछ एक बढ़िया बहुत सारी चीजे मैं आपको चेक करना आपको अच्छे चीजे मिलेगी इसमें

00:16:07ठीक है ओके यह टेक्स्ट एक्स्ट्रक्टर करके इसको पन चेक करते हैं अब देखो मैं यह आपर यूज करता हूं

00:16:17पेको यह सही ह�गता ही मैं इसको बहुत ज्याँ यूज करता हूं जिसलिए मैं आपको एसा एक जाना आपकी आपकी शोईज आत आपको क्या यूज

00:16:23करता है जिसे यहां पर आता हूं जेसे में यहां पर नदर के पास धम madam को टॉन

00:16:41RGB अपने पास red green blue का combination होता है ठीक है और hex होता है जो अपने पास hash करके आता है यह color options होते है

00:16:50HSL अपने पास आता है ठीक है यह भी मैं आपको बताऊंगा color का शायद अपने discuss नहीं करा color कौन कौन से आता है अपने पास

00:16:58ठीक है अब देखो यहाँ पर मैंने इस color को pick करा तो यहाँ पर window shift c के through आप यहाँ पर इसको color को pick कर सकते हो

00:17:05बाकी color पी करके through भी कर सकते हो और inspect करके भी ले सकते हो कोई दिक्कत नहीं है आपने उस element को target कर लिया अगर आपको same color चीए कहीं से भी तो आपने बस यहाँ पर यह बता रहा है कि यह BTN primary लगा रहा है और इसका color यह है इस पर click करोगे तो यह आपको यहाँ पर दे रहा है �

00:17:35यह तो inspect करके ले सकते हो उसके अलावा अपने पास अपना power toys है यहाँ से भी ले सकते हो आप उसके अलावा extension भी ले सकते हो जो आपको best लगे अब देखो यह जो अपने power toys लिए इसमें जैसे मालो आपको किसी text को copy करना है तो copy भी आप यहाँ पर कर सकते हो window shift ट के through window shift ट य

00:18:05तो मैंने यहाँ पर Ctrl V कर दिया तो यहाँ पर वो टेक्स आपका कॉपी हो किया गया वो टेक्स यहाँ पर आपको दिख जागा रेजिस्टर विडिदेट सोल डिस्टोर यही तो लिखावात है यहाँ पर ठीक है तो यह आपका

00:18:17टेक्स्ट का होता है ऐसे और बहुत सारी चीजे चेक करना उसको पावर टो इसको जो टूल मैंने आपको बताया है अब देखो यहाँ पर अपने को यह नहीं देखना था अपने को देखना था वह सीम सा बटन अपन यहाँ पर क्रिएट करना चाहते है यह जो बटन बनावा �

00:18:47उसके ईलावा अपने को अपने करना खोंग ओर है और क्या कर देंगे और क्या कर देंगे आख़ा पर लिखा एपनी

00:19:17इतना सा काम मैंने आपर कर दिया तो देखो मेरे पास यहां पर रिजिस्टर लिखा वारा है

00:19:21टेक्स्ट ट्रांस्फर्म मत लगाओ अपर केस में करो केपिटलाइस तो उसमें फर्स लेटर को कर देगाओ तो यह अपर केस में अब इसने फोन दूसरा यूज कर रहा है

00:19:33अब यहां पर इस जो यह बॉक्स है यह बटन है इस बटन के अंदर की साइड स्पेसिंग है तो यहां पर अंदर की साइड स्पेसिंग है तो यह क्या पैडिंग है या मार्जिन है एक बार जल्दी से बता दो कि पैडिंग है या मार्जिन है

00:19:47margin है या padding है

00:19:50एक बार जल्दी से बता दो

00:19:51और voice का issue आ रहा है तो ये भी बता दो

00:19:54क्योंकि एक student ने voice का issue लिख रखाए

00:19:56सिबल करे सर जब हम content लिखते है

00:20:06तो body में पहले से padding margin set होता है

00:20:09तो by default कितना रहता है

00:20:11सर येस box model पर discuss करेंगे भी आगे

00:20:14मैं पता हूँगा कितना रहता है by default

00:20:16पहले से कितना होता हूँ आगे बताने वाला हूँ मैं

00:20:22padding padding padding padding चलो वह अच्छी बात है

00:20:27सब को पता है

00:20:29तो यहाँ पर अपने को क्या करना है

00:20:31इसमें padding लगानी है अब देखो मैं यहाँ पर

00:20:33इसमें padding लगा देता हूँ

00:20:35तो इंस्पेक्ट करके लगा देता हूं को फृटंछ करता यही बटन था अभिस पर आपको किया करना है पैडिंग लगा करनी है आपने पैडिंग लगाने पैडिंग

00:20:47देते हैं उसे मालम तो पर आपन डूंछ कमके बट की हैं उसके अलब

00:20:54सब्सक्राय निए पर और ने चाहते हैं को इस त सब्सक्राइब

00:20:55तो आपने यहां पर पैडिंग लगानी है और पैडिंग इतनी लगानी है टॉप से हौन

00:21:13टॉब और बॉटम की 10 पिक्सल और वैसे मैं 100 पिक्सल कर देता हूं ठीक है तो यह बटन उस तरीके से आ जाएगा अब यह चारो तरफ से हलका सा कर्व भी कर रखा है तो वह क्या है आपकी बॉर्डर रेडियस तो बॉर्डर रेडियस भी लगा दो आप इसके उपर ठीक है �

00:21:43इस पर यह करसर लेके जा रहा है तो इसकी ओपेसिटी और करसर पॉइंटर आ रहा है तो यहाँ पर आप वह भी कर सकते हो उसमें कोई बड़ी बात ही नहीं है आप बुलोगे कि आपका जो बटन है उसके उपर आप सुडू क्लास लगा दो बटन और उस पर जब मैं होवर

00:22:13यहाँ अब यहाँ पर जब मैं लेगा जानों तो तुरंत त्यूल �rael यहाँ पर आप देख अच्छी सब апाउना है यहाँ पके थे लाएं आगे उप

00:22:35तो यह अपना padding और margin वाला concept था जो अपने discuss करा margin अपन कैसे apply करते है पैडिंग अपन कैसे apply करते है इसी के basis पे यह जो login वाला बनावाए यह जो login नहीं

00:22:51ठीक है registration वाला यह जो बनावाए यह same form आपको create करना है यह same form आपको create करना है

00:22:58कर पाओगे आप I hope उमीद करता हूं मैं आप सभी से ठीक है तो आपको एक div लेना है उस div के अंदर आपको यह वाला

00:23:08skip कर देना login registration वाला अगर नहीं बने तो बस उसके अंदर आपको यह पूरा का पूरा form बनाना है जिसमें आपको एक Facebook का बनाना

00:23:16है एक Google का बनाना है फिर उसके बाद first name last name email id यह सब चीजे फर्स नेम लास नेम एक

00:23:22line में नहीं आए तो आप नीचे नीचे कर देना एक line by line बना देना ठीक है कुछ कुछ कोशिश करना same बनाने की क्योंकि कुछ

00:23:30properties अगर आपको नहीं पता होगी तो पूरा same नहीं बना पाऊगे बस यह आपका टास्क एक छोटा सा है यह form आपको create करना है अभी जैसे अपने margin पड़ा अब आप चाहते हूँ कि मैंने कोई box बनाया जैसे मालो मैंने यहाप पर एक box बनाया ठीक है और इस box को मैं आप

00:23:48टार्गेट भी कर लेता हूं मैंने इस box को टार्गेट भी कर लिया जिसको अपने एक बैग्राउंड कलर दिया और बैग्राउंड कलर अपन यहां पर इसको

00:23:55यहां पर इसको यहां पर यहां पर आपने पास यह एक बॉक्स यह उसके अंदर पूरा

00:24:21मैं को इसको Center में लेकर आना है यह संटर में लाने के लिए आपके पास सिफ एक यह उप्शन अभी इसमें यहां पर आप बोलोगे

00:24:30मार्जिन लगा दो और मार्जिन की वेल्यू गया रहा हूं तो जैसे मार्जिन ओटो दूँगा तो वह अपना

00:24:37सेंटर में आ जाएगा सेंटर में क्यों आ गया क्योंकि यहां पर लेफ्ट से और राइट से वह ओटो मार्जिन यहां पर जनरेट कर रहा है जैसे अगर आप यहां पर आके चेक करते हों मैं यहां पर आता हूं इस बॉक्स को यहां पर टारगेट करता हूं यह वाला बॉक्स

00:25:07और auto margin generate हो रही है यहाँ पर

00:25:09205 और 205 ठीक है

00:25:12तो यह अपने margin और padding पर discuss करा

00:25:15यह आपका एक task है चोटा सा

00:25:16इस task को complete करना

00:25:17I hope आप सबी complete कर लोगे

00:25:19और एक बार बता दो yes sir

00:25:21clear है

00:25:22यहाँ तक किसी को कोई doubt में यह

00:25:37यहाँ वे यहाँ आपका पर दो यहाँ है

00:26:07अब अब अब

00:26:14अब

00:26:31है अब सरस्क्रिंशोट लेना है फ्रेम का स्किन्शोट लेनी की क्या जोता है

00:26:35अब बोलते थे ना की कॉल कर लेना मुझे बट उन्होंने बात नहीं करने कराया है आप से तो कॉल

00:26:49क्लास के बाद डाउट आपके जो भी होंगे मैं पूछ हूंगा कि आज फ्राइडे फ्राइडे को अपना डाउट सेशन फिक्स रहता है

00:27:04तो अगर डाउट होते हैं तो अपन डाउट लेंगे अपने क्लास के बाद क्लास जैसे मालोग पर ने 45 मिनट की रखी या फिर 40 मिनट की रखी उसके बाद डाउट पर ही अपने डिसकस करा जो भी डाउट है तो आप यहां पर पूछ सकते हूं

00:27:16ठीक है तो यह अपने डिसकस करा अपने मार्जिन और पैडिंग की उपर अब अपन नेक्स टॉपिक डिसकस करते हैं

00:27:37कि CSS के अंदर box model क्या होता है box model के उपर पन डिसकस करते है कि CSS में box model क्या होता है

00:27:47कि सचिन कह रहे है कोडिंग के लिए सर्फ 14 इंच स्क्रीन सही है या 15.6 इंच देखो स्क्रीन तो बड़ी ही सही रहती है 15.6 इंच अगर आपके पास ऑप्शन है तो वह उसको जाए उसके उपर जावाब वह बैस रहेगा ठीक है और अगर खुद का PC है बड़िया घर पे सिस

00:28:17करना पड़ेगा फिर ओका ठीक है अच्छा बनाया आपने जो क्रियेट अकाउंट का है जूमनी उपा रही है दाउनलूड करके फिर करना पड़ेगा इसको ठीक है

00:28:29चलो गई अब अपन डिसकस करते हैं अपने बॉक्स मॉडल के उपर कि अपने CSS के अंदर बॉक्स मॉडल होता क्या है क्योंकि बॉक्स मॉडल भी पूछा जाता है क्या होता है बॉक्स मॉडल अब जैसे मैं यहां पर आके सर्च करता हूं कि बॉक्स मॉडल अपना होता क्य

00:28:59पर देखी भी है, जब भी आप याb कोई भी element को target करते हो तो उस पर इमेज बनी भी आती है

00:29:04inspect के अंदर, जैसे मैं यहाँ पर inspect करता हूं और inspect करके मैं इस element को target करता हूं

00:29:14तो यहाँ पर इसकी इमेज बनी भी आ रही है यह आपका box model है, box model basically होता क्या है

00:29:21समझो इस चीज को

00:29:23किसी भी एक image की through मैं समझाता हूँ

00:29:25जैसे मालो इस image को उठाते है

00:29:26box model basically आपका होता है

00:29:28content, padding, border, margin

00:29:32क्या होता है box model

00:29:33content, padding, border, margin

00:29:36यह आपका box model होता है

00:29:37चार elements से मिलके

00:29:39आपका box model यहाँ पर create होता है

00:29:41content, padding, border, margin

00:29:43और यह चारो चीज आपने

00:29:44सीख रखी है, आपने content भी पता है

00:29:46content किस तरीके से आप देते हो

00:29:48जैसे मालो content में कुछ भी हो सकता है

00:29:50आपका h1 tag, paragraph tag,

00:29:53आपका image tag, वो आपका content हो गया

00:29:56फिर उसके बाद उस content के चारो तरफ

00:29:58जो आप transparent spacing दोगे वो आपकी

00:30:00padding होगी, फिर उस content के चारो तरफ

00:30:03आप border create करते हो, वो आपकी

00:30:04border होगी, उसके बाद border के

00:30:07outside अगर आप transparent space देते हो

00:30:08वो आपकी margin होगी, तो ये

00:30:10चार element मिलके ही आपका box model

00:30:12यहाँ पर create होता है, content,

00:30:14padding, border और margin, चीक है

00:30:16तो अगर box model आपसे पूछा जाए

00:30:18तो box model क्या होता है, box model

00:30:20चार element से मिलके बनता है

00:30:22content, padding, border और margin

00:30:24फिर content क्या होता है, जहाँ

00:30:26पर आपका content appear होता है, जिस

00:30:28tag के अंदर आप अपना content

00:30:30पास करते हो, फिर उसके बाद

00:30:32padding क्या होती है, padding होती है

00:30:34border के inside transparent space

00:30:37चीक है, border क्या होती है

00:30:39border अपने पास अपने content के

00:30:40चारो तरफ बनाईवी एक line होती है

00:30:42जिसकी width भी होती है

00:30:44width, color सब होता है

00:30:46उसके बाद अगर अपने बात करें

00:30:48margin की, तो margin क्या होती है, border के

00:30:50outside जो transparent space होता है

00:30:52वो आपकी margin होती है

00:30:53तो यह आपका box model है, जिस

00:30:56अगर आप यहाँ पर check करोगे तो

00:30:58इसने सारा बता रहा है आपको

00:30:59आपका यह जो

00:31:01button है, इस button की

00:31:04initially, जो width और height है

00:31:06वो इसने दे रखी है

00:31:07680.141 इसकी क्या है width

00:31:10और 15 इसकी क्या है height है

00:31:12चीक है, padding

00:31:14padding की बात करते हैं, तो

00:31:1610 top पे लगी वी है, 10 bottom पे

00:31:18लगी वी है, 100 left लगी वी है

00:31:20100 right लगी वी है, border 0, 0, 0

00:31:22all direction से, क्योंकि आपने border लगा ही ने लगी

00:31:24margin, all direction से 0 है

00:31:26तो यही तो आपका box

00:31:28model होता है, जैसे

00:31:30इस box के उपर ही अपन समझते हैं, इस margin

00:31:32को मैं यहाँ से हटा देता हूं, और मैं यहाँ पर

00:31:34कहा देता हूं, कि आप इसकी width

00:31:36तो जो है, वो आप 200 ही रख लेना

00:31:38और height जो है, वो आप यहाँ पर 200 ही रख लेना

00:31:41तो यहाँ पर एक box आने वाला है

00:31:42अगर मैं यहाँ पर इसको target करता हूं

00:31:45तो यहाँ पर सिर्फ

00:31:47अब भी आपको यह बताएगा कि आपके

00:31:48इस element पर क्या है 200

00:31:50200, आपकी यहाँ पर width और height है

00:31:53अब मैं इसके उपर padding apply कर देता हूं

00:31:55box model के हिसाब से चलते हैं

00:31:57मैंने यहाँ पर लगा दी पैडिंग

00:31:58और padding लगा कि मैंने यहाँ पर कह दिया कि

00:32:00padding आप यहाँ पर कर देना जैसे 20 pixel की

00:32:0320 pixel की मैंने यहाँ पर padding लगा दी

00:32:05आपकर 20 pixel की all direction से padding भी है

00:32:08border border भी मैं create कर देता हूं

00:32:10मैंने यहाँ पर बनाई अपनी border

00:32:12और border यहाँ पर Ipmana create कर देता है

00:32:15मैं कह देता हूं 5 pixel की बनादेना

00:32:17solid बनादेना

00:32:19और green color की border

00:32:21बनादेन इसके उपर ठीक यह काम कर देना

00:32:24तो यहाँ पर इसके उपर border आ रही है

00:32:3550 Pixel की, All Directions से

00:32:3850 Pixel की, मारजीन भी यहाँ पर

00:32:42Apply हो चुकी है, तो यही

00:32:43box model है, Content Padding Border

00:32:46Margin, Content आपका यह है, जिसकी

00:32:50width थूंडर्ट, Padding कितनी

00:32:5120 की Nothing है थूंडर्ट, Borders

00:32:54कितनी 5 की All Directions है, Margin

00:32:56कितनी 50 की All Directions है

00:32:57तो यहीं तो आपका यहाँ पर

00:32:59box model है, लेकिन

00:33:02अगर मैं यहाँ पर बात करू किस चीज की

00:33:05अगर मैं यहाँ पर पूछू कि मेरा यह जो box है

00:33:09इसकी width और height कितनी है

00:33:11तो जल्दी से एक बार सब बता दो कि

00:33:13इसकी width और height कितनी है

00:33:15मैंने आपको समझा है box model क्या होता है

00:33:17box model होता है आपका है आपका content

00:33:20आपका padding, आपकी border और आपकी margin

00:33:22मेरा तो question सर्फ यह है

00:33:24कि यहाँ पर इसकी width और height कितनी है

00:33:27आपके आखों के सामने answer

00:33:29बताओ इसकी width और height कितनी है

00:33:31इस element की यह जो box मैंने यहाँ पर target कर रखा है

00:33:36इसकी width और height कितनी है

00:33:38सब कुछ आपके आखों के सामने खुलावा है

00:33:42जल्दी से इसका answer दो

00:33:44कि इस element की width और height कितनी है

00:33:47200 by 200 pixel, okay

00:33:50220 pixel, okay

00:33:53200 pixel by 200 pixel, okay

00:34:06देखो 38 student है

00:34:11मेरे को हटा के 37 है

00:34:13तो 37 students का जवाब नहीं है

00:34:15यह सिर्फ 4 लोगों ने जवाब दिया है

00:34:17बागे सिर्फ class ही लेते हैं

00:34:19क्या, response मेरे को सब का चीए

00:34:21गलत दो जवाब कोई दिक्कत नहीं है

00:34:23क्योंकि मेरे को इतना याद मीं नहीं रहेगा

00:34:25किसने गलत दिया था, किसने सई दिया था

00:34:27200 pixel, 200 pixel, ठीक है

00:34:38200 by 200, 200 by 200, गर्वित करे 200 by 200, ठीक है

00:34:43में भी और लगा दिया साथ में, शायद

00:34:51ठीक है, जल्दी जवाब दो सब

00:35:09ठीक है

00:35:10ठीक है

00:35:13यह स्टुडेंट काउंट कैसे कम होगे

00:35:1538 मैंने बोला 37 है, तो वो लेफ्ट होगे गिया

00:35:18ठीक है, यार क्या जवाब दूँ मैं

00:35:19ओके, ओके, ओके, ओके, ठीक है, सबने जवाब दिया है

00:35:28लेकिन सबका गलत है

00:35:30यहां पर 200, 200 जैसे भी दिया है, सबका गलत है, और सही किसी ने दिया भी नहीं, किसी एक स्टुडेंट ने अलग दिया था, 220 पिक्सल यह भी गलत है

00:35:39तो यहां पर यह नहीं है, इसकी width और height

00:35:42देखो width और height का calculation अपन कैसे करते है

00:35:44अभी तो आपको पता नहीं है, इसलिए आपने सिर्फ मैंने आपसे question ही करा था जिसका answer दिया

00:35:48लेकिन अब अगर आपसे question हो, यह तो आपको answer सही देना है

00:35:52कैसे, यहां पर अगर मैं पूछ रहा हूँ कि इसकी width और height कितनी है, आपने देखा कि 200, 200 इसकी width और height हो गई

00:36:00लेकिन नहीं, padding transparent space है, वो भी तो count होगा, border भी तो count होगी

00:36:06margin count नहीं होगी, क्योंकि margin outside transparent space है

00:36:11मैंने इस element की width और height पूछिए कितनी है, तो element की width और height बॉडर तक बनेगी

00:36:20element की, चीक है, तो यहां पर 200, 200 तो इसकी initial width है, लेकिन आपने इस element के अंदर ही तो padding लगा रखी है

00:36:30वो transparent space है, इस element पर ही तो border बना रखी है, तो border भी इसी की है

00:36:34तो यहां पर जब भी width और height की calculation की बात आती है, तो अपन यहां पर अपने content, अपने padding, अपनी border को

00:36:42यहां पर include करते है, चीक है, तो यहां पर 200 pixel इसकी क्या है, width है, अब देखो width को मैं calculate करता हूँ, क्या होगी

00:36:52200 pixel इसकी width है, width 200 pixel होगी, अब मैं यहां पर padding को भी count करूँआ, और जब भी width की count की बात आती है, तो padding कौन सी count होगी

00:37:02left और right की, top और bottom की तो नहीं count होगी, top और bottom में तो height count होगी, चीक है, तो यहां पर left और right की कितनी padding है

00:37:1020-20 pixel, तो 40 pixel ही होगी, तो कितनी होगी total, 240 pixel, ऐसे ही, left और right की आपकी border भी count होगी, तो 55 pixel आपकी left और right की क्या होगी, border, तो वो कितनी होगी total, 10 pixel, तो 250 pixel आपकी इसकी width है

00:37:26और अगर height की बात करें तो same ही चलेगा, height की बात करें तो 200, 20-20 top bottom की मतलब 240 और 55 आपकी border मतलब 250, तो 250 pixel आपकी यहां पर क्या है, height है, चलो चेक करते हैं सही है या नहीं है, देखो मैं इसके पर cursor लेके जाता हूँ, तो देखो यहां पर जब मैं cursor लेके जाता हूँ, तो द

00:37:56इसमें include नहीं होगी क्योंकि element के बाहर है वो, बाहर का transparent space है, इस complete element की width और height कितनी है, 250, 250, ठीक है, I hope कि आपको समझ में है कि इसकी 250 height है और 250 width है, कैसे calculate करी, easy सा concept है, समझ लो इसको, मैं यहां पर बता देता हूँ, लिकी देता हूँ मैं चलो, अगर अपने को width calculate करनी है, त

00:38:26है, यह formula है मालो आप, और उसके यहां पर right की padding क्या है, चीक है, right की padding भी open check करेंगे, फिर उसके बाद, यहां पर उसकी left की border क्या है, वो भी count होगी, और यहां पर right की border आपने कितनी लगा रहे है, क्योंकि आप direction wise करीबार अलग भी तो लगाते हो, तो उसके basis पे आपकी width औ

00:38:56यहां पर initial height, top की आपकी यहां पर padding क्या है, उसके अलावा bottom की padding क्या है, क्योंकि height कैसे होगी, vertically होगी आपकी, तो यहां पर bottom की padding क्या है, वो count होगी, उसके अलावा top की border क्या है, वो यहां पर count होगी, और यहां पर bottom की आपकी border क्या है, वो count होगी, यह width और height की calculation का एक formula माल

00:39:26भीट और हाइट अपने अगर केल्कुलेट करी तो वो अपने पास यह आ रही है

00:39:29जैसे चलो मैं आपसे एक कुशन और पूसता हूं मैं है आपर एक बॉक्स और बना रहा है

00:39:33मैंने यह बनाया.2 बॉक्स 2 करके मैंने यह बना लिया

00:39:38और इसको मैंने यहापर टारगेट कर लिया。

00:39:40मैंने बुला.Box2.

00:39:42इसको मैंने यहापर टारगेट कर लिया

00:39:44और इसके उपर एक background color अपने यहापर लगा दिया,

00:39:46यह वाला.

00:39:47मैंने यहापर इसकी width set करी जैसे

00:39:4980 pixel.

00:39:52और उसके आलावा

00:39:54मैं यहाँ पर इसकी height set कर देता हूँ

00:39:56और height अपने यहाँ पर set करी 90 pixel

00:39:59ठीक है

00:40:00उसके अलावा यह तो फेट तो और height set करीए

00:40:03अब मैं यहाँ पर padding भी दे रहा हूँ

00:40:04मैंने padding दी 20 pixel की

00:40:06और 90 pixel की

00:40:0820 pixel top bottom 90 pixel left right

00:40:10और मैंने इसके उपर एक border भी बना दी

00:40:13और border मैंने यहाँ पर बनाई जैसे

00:40:1510 pixel की solid

00:40:17और यहाँ पर brown color की

00:40:19एक border बना दी

00:40:20और मैंने यहाँ पर margin भी लगा दी

00:40:23और margin मैंने जैसे यहाँ पर लगा दी

00:40:2520 pixel की all directions है

00:40:27तो अपने पास यह box create होके आ रहा हो गया है

00:40:29box create क्यों नहीं हो कह रहा

00:40:31background color आपने दे दिया

00:40:32यहाँ पर box लिखो इसको

00:40:36पूरा नाम नहीं लिखा तो देखो

00:40:38यहाँ पर यह box create होके आ रहा है

00:40:40अब यह जो box create होके आ रहा है

00:40:42इस box की मैं आप से पूछ रहा हूँ

00:40:44कि यहाँ पर इस box की

00:40:47width और height कितनी है

00:40:49जल्दी से calculate करके बताओ

00:40:50इसकी width और height कितनी है

00:40:52यह display आपके पास open है

00:40:53यहाँ पर जल्दी से बताओ

00:40:54इसकी width और height कितनी है

00:40:55calculate करके बताओ

00:40:56अब गलत नहीं होना चाहिए जवाब

00:40:59क्योंकि पहले तो नहीं पताता

00:41:00लेकिन अब गलत नहीं होना चाहिए किसी का भी

00:41:02जल्दी से calculate करो

00:41:03और comment के अंदर बताओ

00:41:05कि इसकी width और height कितनी है

00:41:35I hope अब तक तो कर लिया होगा आपने calculate

00:41:42180 and 120, 150 and 280 pixel width

00:41:48क्या कर रहे हो यह है

00:41:50इतना तो लिखा ही नहीं इसमें

00:41:52देखते क्या है

00:41:55ठीक है 90-90 लगा रहे है हाँ

00:41:58ठीक है ठीक है ठीक है

00:41:59150 by 280

00:42:03ठीक है

00:42:05मैं भी तो calculate कर लूँ

00:42:09मैंने तो कराईनी क्या है यह

00:42:10ठीक है

00:42:12ठीक है

00:42:23क्या आंसर दिया है आपने इसका

00:42:25ओके और यह

00:42:29आपने बताई इसकी height कितनी

00:42:3190

00:42:33ठीक है एक आंसर सही दिखा है मिलको भी हाँ

00:42:44है

00:42:45150 by 280

00:42:49150 by 280

00:42:51280 by 150

00:42:53150 by 280

00:42:54खुप सारा सही दिख रहे है

00:42:56150 by 280

00:42:57140 by 290 यह किस ने दिया रवी ने विर्थ 150

00:43:01प्रश्ट प्रश्ट प्रश्ट गज़े हैं

00:43:02140 by 290

00:43:03140 by 290

00:43:05प्रश्ट प्रश्ट प्रश्ट गज़े हैं

00:43:16से � develop इसक करते हैं

00:43:17विर्त की बात कर रहे है

00:43:1880 pixels यहां पर क्या है

00:43:2080 pixels अ पनी initial

00:43:22विर्थ

00:43:41कितनी है 10 10 pixel मतलब 20 pixel आप इसको एड़ कर दो तो कितनी हो गई 280 पिक्सल यहां पर आपकी क्या हो गई वेट हो गई तो जिसने 280 पिक्सल दिया उसका सही है

00:43:50280 पिक्सल जिसने दिया है उसका सही है क्योंकि margin count नहीं होती मैंने भी बताया margin अपने count नहीं होती

00:43:59280 पिक्सल तो इसकी क्या हो गई वेट हो गई ऐसे ही अगर अपन बात करें अपने height की तो 90 पिक्सल यहां पर initial आपने height दे रखी है फिर उसके बाद padding count होगी आपकी top और bottom की

00:44:11टॉप और bottom की padding कितनी है 40 पिक्सल मतलब 130 पिक्सल हो गया फिर उसके बाद border आप count करोगे कहां की top और bottom की कितनी हो गई 20 पिक्सल तो 150 पिक्सल यहां पर क्या हो गई आपकी height हो गई चीक है तो यही answer होगा इसका यहां पर आके अगर पन चेक करते है जैसे मैं इस element को target करू�

00:44:41बहुत सही है अभी नाब करें कि width 320 height 190 गलत है यह answer किस हिसाब से calculate कर रहो अभी मैंने आपको formula बदाई यह formula होगा calculate करनेगा कई बार question यह पूछा जा सकता

00:44:57प्रंट-end development से related questions पूछे जाए तो box model पहले पूछेगा क्या होता है फिर उसके बाद वो आपको कुछ code लिखे दे और उसमें पूछे कि यार इसकी weight तो हाईर बताओ कि इतनी है चीक है तो आप बता दोगी कि यार इसकी weight तो यह है और इसकी height यह है ठीक है

00:45:14कि यहां पर अगर मैं इस element की बात करें तो इसका top यह है इसका bottom यह है इसका right यह है इसका left यह है

00:45:34ठीक है समझे क्या यह इसका यहां पर top है यह इसका यहां पर right है और यह इसका यहां पर bottom है और यह इसका यहां पर left है यह हो गया ना

00:45:56टॉप राइट बॉटम लेफ्ट इस एलिमेंट के अगर बात करते तो यह इसका टॉप है यह इसका राइट है यह यहां पर लेफ्ट यह बॉटम हो गया सुरी और यह क्या है लेफ्ट है तो इस तरीके से यह चल जाए ठीक है

00:46:11तो यह बात होगी अपने पास इस चीज की अब देखो फिर से में किशन करता हूं आप से आप जबाब नहीं दे पाओगे वैसे तो उससे पहले अर्जुन बोले यह सर यदि मैं

00:46:30एक 200 पिक्सल 300 का बॉक्स बनाता हूं और उसमें कुछ मार्जिन पैडिंग और बॉर्डर देने पर बॉक्स की साइट 200-300 था अब कुछ जादा हो जाता है तो मैं चाहता हूं कि 200-300 का ही रहे तो 200 और 300 का ही रहने देंगे पंदे को कैसे चलो यहाँ पर देखो मैंने जो य

00:47:00पर लो इसकी कितनी है यहाँ पर इस प्रक्सल लेगे जाओगे 250-250 परफेक्ट अब मैं यहाँ पर इस बॉक्स की उपर एक प्रॉपर्टी लगा रहा हूं मैं लगाए बॉक्स साइजिंग और उसके अंदर वैल्यो देदी बॉडर बॉक्स एक प्रॉपर्टी लगाई यह

00:47:30अब यह क्या खेल हो गया यह खेल यह हुआ कि मैंने यहां पर एक प्रोपर्टी लगाई है box sizing border box और यह property क्या काम आती है यह property काम आती है कि आपके element की जो width और height है उसी के अंदर आपकी padding भी include होगी उसी के अंदर आपकी border भी include होगी आपके box की side 200 200 ही रहने वाली है उसी में �

00:48:00मतलब मैं box जैसे मालूम मैं चाहता हूं कि सब boxes की size same रहे और उसके अंदर padding same रहे और border सब के उपर same रहे और सब equal size के रहे तो वहां पर अपने लगाते box sizing border box ठीक है मतलब मैं जितनी width और height set कर रहा हूं वह width और height सब element की set रहनी चीए ठीक है तो यह आपका box sizing border box होता है जिस

00:48:30अब यहां पर अगर मैं इसकी बात करता हूं तो देखो यहां पर क्या हो रहा है यहां पर आपकी width और height कितनी है चक करो 151 50 है वहां पर देखो जो box model बनावा है वहां पर देखो कि तो 150 150 क्या है इसकी width और height उसके अलब पैडिंग लगी है और direction आ 20 की border लगी होई question 5 की की औ

00:49:00नहीं है यह जो आपका आपने डिव बनाए यह 150-150 का नहीं है इसकी विट और हाइट चेंज हूसु की है और वो क्या है 280 और 150 लेकिन मैं चाहता हूं कि

00:49:10150-150 में आपकी 2020 की पैडिंग भी रहे बॉर्डर भी रहे सारी पूरी बनी भी रहे तो वहाँ पर फिर आप क्या करोगे उसके उपर आके एका प्रोपर्टी लगाओगे और वो प्रोपर्टी क्या लगने वाली है बॉक्स साइजिंग और वो आप यहाँ पर लगा दोगे ब�

00:49:40बॉक्स टू था क्या अब ना एक मिनट यह क्या हुआ

00:49:49अच्छा यह विट्टी पैडिंग ज्याद लगा दी कि अपने इसको आप रखो जैसे

00:50:09कि 650 पिक्षel का हाइट अपन यहाँ पर रख लएते जैसे

00:50:32कि एक बाक्स आइजिंग बॉर्डर बॉक्स आइजिंग बॉर्डर बॉक्स अपने इस पर लगाया है

00:50:46वेटे मिनट

00:50:49एक बार के लिए इस बॉक्स को करो कमेंट यहां पर आओ

00:50:59कि एलिमेंट को करो टारगेट यहीं अपना एलिमेंट कि टू हंड्रेड मुल्टिप्लाई एक मिनट बताते हैं यह क्या हो रहा है

00:51:12अपने पैडिंग इतनी लगाई इस पर जैसे मैं यहां पर और डायरेक्शन से लगाता हूं 40 पिक्सल की ठीक है और यह सब चीज़ें वहीं देने दूंद यहां पर आके पन इसको टारगेट करेंगें

00:51:39अगर मैं पैडिंग को इंक्रीज करता हूं तो यहां पर देखो क्या कॉंसेप्ट चल रहा है एक मिनट समझते ऐसा कभी हुआ नहीं है

00:51:58मैं पैडिंग को इंक्रीज करते जा रहा हूं पैडिंग यहां पर इंक्रीज हो रही है तो देखो यहां पर 60 पिक्सल 64 जैसे ही यह 65 से उपर जा रहा है तब आपकी यहां पर विर्थ जो है वो इसमें

00:52:16कनवर्ट हो रही है तक सब्सक्राइब के साथ से पने पास कितनी होगी इस तरी अपनी क्या होगी लेफ्ट राइट की ठीक है और उसके अलावा

00:52:432020 वह हो गई अच्छा 150 से उपर अगर आपन जार तो यहां पर यह क्या कर रहा है फिर वह आपकी वेड्थ को चेंज कर रहा है

00:52:50तो पिर आपकी वेट ओर हाइट जो है उसके अंदर आपकी पैडिंग और बॉर्डर उसी रेंज के अंदर होना है।

00:53:14यह वाला कॉंसेट्ट अब तो यह कॉंसेप्ट अन्हारा है यह पर देखो क्या हो रहा है समझना इस चीज को

00:53:17अभी मैंने जो यहां पर इस पर विट लगा रखी 150 है और हईट क्या है 120 है बॉक्स साइजिंग बॉड़र बॉक्स भी मैंने यहां पर लगा रखा है मतलब मैंने बोल रखा कि 150 और 120 के अंदर ही आपको पैडिंग और माल बॉडर जो है वह रखनी है यह बिल्कुल सही समझ �

00:53:47यहां पर क्या हो गई आपकी total padding हो गई और उसके अलवा 10 10 pixel की border हो गई मतलब 150 pixel यहां पर width के बराबर आपने padding लगा रखिए लेकिन अगर आप width से जादा जाते हो अगर padding के मामले में width से जादा जा रहे हो जैसे आपने 66 यह change कर रहे हो तो यहां पर यह अब change करेगा उसकी width क

00:54:17पैडिंग और बॉर्डर में तो फिर वो वाली चीज वहाँ पर एपलाई हो रही है फिर वो ट्रांस्परेंट स्पेस थोड़ा सा आगे किसके गा ठीक है ये चीज हो रही है यहाँ पर समझ पा रहे हो क्या I hope कि आपको समझ में है यह कॉंसेप्ट भी क्या हुआ है यहाँ प

00:54:47कई बार करके देखा है यह बिल्कुल दिखो यह रहा इसी का एक्जामपल आपके सामने भी जसट आया था जो मैंने आपको बताया

00:54:55अरजुन जो आपने कुश्यन पूछा है यही सेम आया है यह शायद पिछली क्लास में मैंने नहीं बताया था इसा कोई कॉंसेप्ट क्योंकि कभी मेरे साथ हुआ भी नहीं यह चीज लेकिन अगर हुई है तो मैंने आपको बता दी क्योंकि अपन Css इतना लिखते ही नहीं है

00:55:25लेकिन आज यह कॉंसेप्ट समझ जाओ कि क्या हुआ होगा यह कि अगर आप पैडिंग को विर्थ से जादा एपलाई करोगे तो फिर आपकी विर्थ के अंदर जो एक्स्ट्रा पैडिंग एपलाई हो रही है वो भी कैलकुलेट होने वाली है बॉक्स साइजिंग बॉर्�

00:55:55चिंञे बिए अपने देखा यहां पर अपना बॉक्स मॉडल और उसी के साथ अपने यहां पर देखा अपना क्या क्या विडिठ और हैट की करना चिक है और बॉक्साइजिंग बारँ और बॉक्स हीगी पर पकर डेखिए यह सब चीज़ ह Tai शिख रहें पने चीजों सेब

00:56:25नहीं बना पा रहे तो उसमें जुगार मत लगाओ बस उतना बना के रख दो उसको क्योंकि आगे जैसे जैसे प्रोपर्टीज देखते जाएंगे वैसे वैसे वह सारी चीजे आती जाएगी और आप उसको कंप्लीट बना भी लोगे फिर एक दिन

00:56:55yeah

00:57:10कि सांट करें कि सर करें कि सर्फर और राइट दोने साइड की पैड़िंग हैंड़ हो इस बिलकुल है फोगी एड़ के अंदर पैड़िंगом और आपकी ब्रूरइब होगी लेगिन

00:57:20बॉक्साइजिंग बॉर्डर बॉक्स लगाते हो तो वहाँ पर जितनी width और height होगी वो एड़ होगी वो ही count होगी लेकिन अगर आपने padding width और height से ज्यादा है अगर दोनों की calculate होगे तो फिर वो भी उसमें width के अंदर include होती जाएगी जितनी ज्यादा होगी width और height से ज्यादा

00:57:50तो आपके width और height के अंदर आपकी padding है और जो आपकी border है वो भी calculate होती है वो भी space लेती है तो width और height आपकी यहाँ पर increase होती है transparent space उसमें count होता है तो जो size है वो change होता है आपके element का लेकिन अगर आप box sizing border box लगाते हो तो जितनी आपने width और height सेट करी है element की उसी के अंदर आ�

00:58:20अंदर उसी में include रहेगी वो उससे बाहर नहीं जाएगी वो ठीक है आपने एक बार बोल दिया आपने बता दिया कि मेरे पास इतना space है ठीक है जैसे मालू मैंने कहते कि यह एक room का मेरा इतना space है अब आप इसके अंदर चाहिए 100 बच्चे रखो 200 बच्चे रखो इस space से ब

00:58:50इता अच्छा नहीं था ठीक है समझ में आ गया होगा आपको

00:59:13यहां तक की चीज किलियर है तो फिर कोई डाउट नहीं किसी को किसी ने कोई डाउट रखा भी नहीं

00:59:20कि चलो मैं आपको अटेनेंस के पॉइंट पन और पॉइंट टू भी बता देता हूँ

00:59:35सौरव कह रहे कि सरकल की वीडियो थोड़ा जल्दी अप्लोड करवा दीजिए ठीक है मैं उसको अप्लोड करवा दूँगा एक बार मैं टीम से बात करता हूँ

00:59:42एक्चुली हुआ यह कि जो अप्लोड करने वाली टीम थी उसमें एक जो है वो आजाए नहीं ओफ है और फिर मैंने बाद में पता चला क्लास के पहले तो वो अप्लोड नहीं हुई वीडियो तो ठीक है मैं कोशिश करता हूँ कल तक आपकी अप्लोड हो जाएगी वो वी�

01:00:12अटनेंस के पॉइंट वन के अंदर आपको मेंचन करना है पैडिंग यही अटनेंस का पॉइंट वन है अटनेंस के पॉइंट वन के अंदर आपको मेंचन करना है पैडिंग

01:00:42और attendance के point 2 के अंदर आपको mention करना है box model

01:00:50attendance के point 1 में padding mention करना है और attendance के point 2 के अंदर आपको mention करना है box model

01:00:59तो इसको fill कर दीजिए आप अपने form को ठीक है

01:01:04अगर कोई doubt है तो आपने doubt पूछ सकते हो नहीं तो फिर अपन अपनी class खतम करते हैं आज की

01:01:11सारे लमेस कब तक आ सकता है तो कोई इसका अभी proper date नहीं बता सकते लेकिन आज आएगा बहुत चल्द अभी

01:01:20इसके उपर काम चल रहा है बहुत सारी नहीं नहीं चीज़े निकल के आती है जब एक project बनता है पूरा बहुत सारी नहीं नहीं दिकते भी आ रही है

01:01:26तो वो सारे सब चीजों का solution होने के बाद elements live हो जाएगा

01:01:31अगर आपकी कोई भी डाउट नहीं है तो आज की class अपन इतनी रखते मिलते हैं फिर अपन अपनी Monday वाली class के अंदर

01:01:49क्योंकि आज Friday है तो Saturday Sunday अपनी class नहीं रहती अपनी class होती है फिर Monday को Monday to Friday चीक है

01:01:56स्वारव गरे सर नेक्स्ट बैच प्रोजेक्ट बैच लेके आएगा येस बिलकुल नेक्स्ट जो बैच आएगा वो प्रोजेक्ट बीज्ट ही रहेगा पूरा complete

01:02:14सब्सक्राइब होता है येस बिलकुल होता है ये जो प्रोजेक्ट है ये चोटा प्रोजेक्ट नहीं है बहुत बड़ा प्रोजेक्ट है

01:02:38क्योंकि लाइव होता है तब चीज़े बडल जाती है अपन जो लोकल होस्ट बनाते है उसमें चीज़े उतनी ही रहती है लेकिन लाइव में बहुत सार दिक्कत होती है जब आपने एक प्रोजेक्ट को लाइव करते सब चीज़े खरीदनी पड़ती है अभी तो अपन फ्र

01:03:08आई फाइफ होना चीज़े और राइजन फाइफ है तो भी बैस्ट है जनरेशन जो है वो लेटिस्ट होनी चीज़े

01:03:14ठीक है इशा करें कि रैजुमे के लिए बनाओं तो सही है क्या बनाओ रैजुमे के लिए कि सीच की पास कर बात कर रहो आप

01:03:26अरुचुन करें मैं भी ऐलम प्रोजिक्त बना रहा हूं अच्छा यह तो बहुत अच्छी बात

01:03:37है अपने रेजुमे इसको एड़ करना इशा करें लमस यह बिल्कुल रैजुमे के लिए यह स्वाजेक्ट

01:03:43है कि खुद से बनाओ आप प्रोजेक्ट जो भी बनाओ इतनी चीजे आप सीख लिए अब तो प्रोजेक्ट बना सकते हो अब आलाम से

01:03:53कुनाल घ्रसर मेरी अटेने जा रही क्या इसका मेरे को कोई आइडिया नहीं एक इसकी आरे किस किस नहीं आरी यह तो चैक करने के बाद

01:04:04ही पता चलेगा अटेनेंस की जो टीम है वही चैक करती है

01:04:07साइनात करें कि सर्फ with border box and without border box में content की size same रहती है क्या

01:04:25content की size जो है वो depend करती है आपने phone size कितनी लगा रही है

01:04:29उसके basis पे चलती है content की size तो font size के basis पे चलती है

01:04:34width और height में नहीं होती हो वो तो आप जितनी उसकी अपने display के हिसाब से size

01:04:41set करोगे उस size के हिसाब से वो show होती है ठीक है चलो आज की class इतनी ही मिलते है फिर अपन अपनी next class के अंदर

01:04:50okay guys thank you so much bye bye everyone and take care all love you all love you all bye

01:05:04झाल

Be the first to comment

Add your comment

Learn CSS Box Model & Box Sizing + Button Design Tutorial

Category

Transcript

Be the first to comment

Recommended