CSS Box Model - Margin, Padding & Borders | Sigma Web Development Course - Tutorial #18

➡️ English Subtitles are now up for all the videos!
TimeStamps:
00:00 Introduction
00:26 Sigma Web Development Intro
00:35 CSS Box model
14:50 Margin Collapse
16:43 Conclusion
17:18 Sigma Outro

python, C, C++, Java, JavaScript and Other Cheatsheets [++]:

►Learn in One Video[++]:

►Complete course [playlist]:

Follow Me On Social Media
Comment "#HarryBhai" if you read this 😉😉

[CodeWithHarry]

8:49 - Many viewers have expressed curiosity in the comments regarding why the computed border appears as 1.6px instead of 2px. This discrepancy is a result of my default display scaling setting, which is set to 125% on Windows. Additionally, I have applied a zoom setting in Chrome. To view the precise border value, it is necessary to reset both the display scaling in Windows and the browser zoom to 100%. I hope this clarification addresses your queries! #SigmaBatchOp

[muneebazher]

Harry sir we know the views and engagement are decreasing day by day and it also disheartening but please don't stop, we believe in you, I try my best to engage in every way possible. So don't get disappointed and let's take this course to next level ❤❤

[themystic]

Harry bhai !! ! I was looking down at the inspect element code untill you said "Uper dekho Uper!! "🤣 this was the most interactive and funniest part uptill now ! Lots respect ! 🤗

[rummanakhtar]

Hi Harry, Salam. I had bought some popular web development courses in the past and watched some of the videos from them. Comparing this course with theirs, I can definitely say that Sigma Web Dev Course comes bundled with your years of experience. This CSS Margin collapse concept is one such example. In none of the courses they mentioned this, but this was such an important concept. This shows the quality of this course. This is the first time I am learning this concept. You have put so much effort for educating us. Thank you so much for the efforts and the quality content. #SigmaBatchOP

[IamHuzaifaFaisal]

• We cannot assign multiple IDs to the element, ID of the element must be unique.
• If we set box-sizing property to border-box it means the borders and paddings are now included in the total width and total height of the element.

This course is getting interesting day by day, Harry Bhai thanks for this great course. Hum toh yeh course poora karkay hi ab aapka peechha chhorain gy. 😁😁

[TejasWasnik]

Tutorial 18 done.✅
ham kisi element ko ek sei zyada id nahi de sakte.
box sizing border box matlab content + padding + border. without box sizing property sirf content ko hi height/width alot hogi. without border box property woh height/width sirf content ko alot hogi.

Kafi maza aa raha hai iss course mei. keep it up harry bhaiya.
SIGMA BATCH OP!

[saifali-vcvu]

Wow. What a series. Kudos to you Harry for keeping this absolutely free. ✌

[chandanbisht]

• ID can only be assigned once per element and it must be unique.
• If we set box-sizing property to border-box it means the borders and padding will now be included in the total width and height of the element.

Harry bhai you are great😍 your course has included so many important concepts and you were right about the people who are confused and don't know margin collapsing. It was asked in my interview and I didn't knew about this topic. but I have practiced CSS by making so many projects I always wonder why my padding gets added up but not margin. Thankyou harry bhai on highlighting this topic. ❤

[ManasAgrawal]

Bhaiya you are great. The excitement of many people is continuously decreasing but you are uploading videos regularly. I can say with confidence that those who will learn web development from this course till end regularly will became a great web developer.
We will feel you proud after making great production level websites by learning from your course. #SigmaBatchOP #HarryBhaiyaOP

[ajeetverma]

Ek(1) element mein Do(2) ID nahi di ja sakti hain kyunki yeh HTML ke Niyamon ke khilaf hai.
Agar Do(2) alag alag elements mein ek(1) hi ID di jaye toh yeh dono elements uniquely identify nahi honge.
Thank You so much Sir
for Sigma Batch 😊🥳

[ayushmaanraturi]

4:48 We can't give >1 ID to any element because IDs should be unique, as our Aadhar card numbers are unique.
Tutorial - 18 Done ✅
#SigmaBatchOP #HarryBhai
Thank you Hary bhai for this amazing course ❤

[shashank]

Don't stop making such amazing tutorials. These are really helpful. Thank you Harry bhai

[VanshNagpal]

4:42 We cannot give more than 1 Ids to an element as it is used to uniquely identify an element just like our Adhaar Card.
Thank you so much for this amazing course. #SigmaBatchOp

[SamnitSandhu]

4:45 No Harry bhai we cannot give a element different id's, it can just have one id but a single element can have different classes. Thank you bhai for this beautiful course😊

[CodeNinja-ug]

Hey Harry Bhaiya, Just want to say that I recently starting following this course and man it is mind blowing! The quality is better then most of the paid course out there and you also teach extra stuff which others don't. The amount of work that you put into these videos is insane and enhances the overall experience of the course. Thank you for making this course free. I really appreciate the efforts you take to make sure we get the right information and your dedication to solve everyone's doubt. The handwritten notes as well as the notes on the website are very helpful and in detail. Once again thank you.

[mdwazidali]

I wanted to express my appreciation for your dedication and hard work as my online teacher. Your commitment to our education, adaptability in the digital learning environment, and the passion you bring to your virtual classroom have made a significant impact on my learning journey. Thank you for being an inspiring and supportive teacher.

[ivishal]

Summary of Lecture 18
1. Margin: border ke bahar ki space
2. padding: border aur content ke beech ki space
3. By default height and weight specified to an element is consist of only content. (yaani height jo denge wo sirf content ki height hogi)
4. box-sizing:border-box : when we use (box-sizing:border-box) and we give height or weight to an element then it consist of padding border and content (ab jo height denge wo content, border aur padding teeno ko mila ke hoga)
5. Margin collapse: when Margin of 2 element overlap then only one margin will be apply which is largest of the two margins .
6. ways to write (i) margin: nUnit; (ii) padding: nUnit; (iii) border: nUnite style color;

Answer of Questions:
1. No, an HTML element cannot have two id. ID is unique for an HTML element.

Lecture 18 Completed ✅

[imranhaider]

No one teaches better than Sir Harry thankyou so much sir for this course

[pushkarsingh]

Harry Bhi I Understand Your Affort in Making This Sigma Corse .
Salute to your Characteristic.

[ronaldoxmessi]

The audience is not as much as before but applaud to your dedication and motivation pls dont stop this course it is really really helpful and modern. If you are new here I really recommend this course.