Ever wondered about the height and width of a content area in a box model? How does padding, border, and margin work exactly? Don't you think our life would be a lot easier if there wasn't anything like box-model! But hey, in this video, we dive deep to find out how box model works for block-level elements.

We'll have two quick assignments. Additionally, you'll learn border-radius and outline property in CSS and understand the difference between border and outline property.

After watching this video, you'll have a clear understanding of CSS Box Model and you'll be a step closer on pro CSS journey!

???? Chapters
00:00 - Recap
00:34 - Introduction
00:46 - Open the Previous Project
01:02 - What is "padding" in CSS?
03:09 - Understand Padding in CSS in depth
05:33 - What is "border" in CSS?
07:19 - Understand Border in CSS in depth
10:30 - What is the Problem with "box-sizing" in CSS?
14:55 - Understand "box-sizing" in CSS
22:58 - What is Universal Selector in CSS?
23:43 - More on "box-sizing" in CSS
24:13 - How to Decide the Width and Height of Content Area?
24:49 - What is "margin" in CSS?
30:30 - Understand Margin in CSS
35:56 - Understand "border-radius" in CSS
39:00 - Quick Assignment 1 - Give "border-radius" To Any Random Photo Inside a Circle
40:00 - Solution 1
44:38 - Use Color Picker
45:20 - Can We Give a Negative Value To Margin?
48:50 - Quick Assignment 2 - Google "linear-gradient" Property in CSS
50:18 - What is "outline" Property in CSS?
54:00 - Conclusion
54:19 - Next Video

If you have any doubt you can ask in comment section I will reply to each and every question or you can reach out to me directly on my social media handles mentioned below.

Social Media
???? Linkedin: https://www.linkedin.com/in/anurag-si...
???? Instagram: https://www.instagram.com/procodrr.an...
???? Twitter: https://twitter.com/anuragsinghbam
???? Portfolio: https://anuragsinghbam.com/

Music by geoffharvey from Pixabay

Show more