Learn CSS Box Model In 8 Minutes

🚨 IMPORTANT:

In this video I will be explaining the most important concept of CSS. The box model. Everything in CSS is made of boxes so it is crucial to understand how the CSS box model works. In this video I will use examples to explain and show how the box model works on CSS elements, and by the end of this video you will have a complete understanding of the CSS box model.

Twitter:

GitHub:

CodePen:

#BoxModel #WebDevelopment #CSS

[thelitterateman]

The Odin Project is officially pumping some viewership to you.

[madalchemist]

The part at 6:29 might be confusing for some people, so I explained it here:
User here tells you that the total size of the element is 180x180, despite him specifying the height and width properties with value of 100px.
So, user here wants the total size of the element to be 100x100, not 180x180.
He tells you that there is a property called "box-sizing" with value "border-box".
"border-box" takes into account the height and width values you mentioned, which are 100px for height and 100px for width.
What "border-box" will do is make the total size of the element 100x100.
To do this, it will first look at the current border and padding numbers (margin is out of the question because we said margin is not taken into account in the total element size), and it will work out the total element size using these numbers.
User changes the border size to 20px, and padding still remains as 10px.
Let's work this out. Assume the initial total element size is 0px.
20px border up and 20px border down means that the total element size is now 40px.
Padding. 10px padding up and 10px padding down means that the total element size is now 40px + 10px + 10px = 60px.
FInally, "border-box" subtracts this 60px from the desired total element size, which is 100px. So 100px - 60px is 40px.
This 40px number we just calculated will be given to the element content size. So now, the total element size is 40px (the element content size) + 60px (the element padding and border sizes) which gives us a total element size of 100px.
This entire process repeats for left and right (the width), causing the total element area to be 100x100. Pretty cool, right? Rewatch this part if you're still confused while reading, and focus, and tell me if you got it!
ALSO I'M A THE ODIN PROJECT STUDENT!!!

[DANNYFIGDESIGNS]

Did not know the margins collapse. Thank you.

[AlexTechie]

This is one of the most important things to understand about web design, arguably the first thing everyone needs to learn, but a lot of us just go on without fully understanding it, myself included. Thank you for breaking it down and telling us what the Box Model is, what the different properties do, and what we need to know in order to style elements exactly how we want them to look. I'm gonna get to work on it and make notes in my HTML/CSS lab! 👍

[neilrudnick]

Pay attention to how he "comments out" an element at 6:35. ctrl + / has been a game changer for me. It allows me to select an element and toggle it on/off and see its effect.

[Jedi.Trader]

Gets tricky with the height and width being eaten up after box sizing, but you make it easier to understand! Thanks!

[dmc]

Excellent explanation. This is by far the clearest I've found so far. Thanks!

[watchmanscall]

I'm a student of coding and programming and this box model stuff with the content, padding, border and margin has always confused me. Today I am no longer confused but rather empowered to conquer this. i just told my wife, where's this fella been all my life. lol Thank you sir! Hell, I even broke out the crayons to draw this stuff in my notebook! lol

[AshishGupta-beyz]

The way you explained too easily is amazing. Got cleared many doubts. Thanks a lot

[gboostt]

Studied the box model for 2 days and couldn't understand it yet
you explained it to me in 8 minutes and i understood everything!
Thanks!

[ozzyfromspace]

OMG for some reason I wasn't getting it during my class lectures. You cleared it up so well man, thank you! I really appreciate how easy you are to understand. Best wishes my man!

[PM-]

I've been watching tutorials where I would type in the CSS line by line hoping to finally understand what it means, but this video finally did it.

[hiteshchalise]

Margin Collapse surprised me, didn't know thanks :)

[ragnar]

This was the fastest 8mins I've spent on a coding video. Love the conciseness

[princeshassi]

Bro Love your simple style from Pakistan. I was struggling with CSS Flex even in the first place I don't even know about Box model but after watching this and other of your's (Position is css) I am very much clear. Thanks again.

[spec]

i highly recommend any one still starting in css to take Kyle css course one friend on mine took the course and after going through it with him I definitely learn more about css and not still that afraid about it really thanks to you Kyle and to my friends that took the course

[ZanxCodes]

Thanks a lot, you made it so much easier to understand by using crystal-clear explanations and live examples!

[catherinesmart]

Odin Project FTW!!!! We got this, and our future is bright :D

[kylerkeeley]

*realizing I’ve spent a couple weeks trying to understand something you explained so clearly in 8 minutes*

Thank you!

[crazybieberchic]

Thank you, this was so simple to understand. You're a great teacher