Learn CSS Box Model In 8 Minutes
ฝัง
- เผยแพร่เมื่อ 21 พ.ย. 2024
- 🚨 IMPORTANT:
Learn CSS Today Course: courses.webdev...
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.
Box Model Article: blog.webdevsim...
Twitter:
/ devsimplified
GitHub:
github.com/Web...
CodePen:
codepen.io/Web...
#BoxModel #WebDevelopment #CSS
The Odin Project is officially pumping some viewership to you.
I came from The Odin Project too!!! lol
@@ricardodelacruz8666 Me too :)
@@ricardodelacruz8666 same
Just came after searching for box model on youtube. Found what I was looking for to clear out all confusions. Exactly what I needed. I was having trouble formatting content with float and clear based on box model. This was super helpful! 👏🏼
Lol, What are you doing here?
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!!!
me too from odin project
thank you so much Its help me a lot!!!
nice explanation! I actually get it now🤭
Thanks bro
Your comment was really helpful to me, thank you for the clarification!
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.
how do i do this lol? doing ctrl + shift +7 doesnt work lmao
@@SmartSleeper if you're on Linux/Windows, it's Ctrl + K + Ctrl + C and for windows, Mac: Command + K + C.
For Mac it's ( Alt / )
This was super helpful, thanks noticing it and sharing!
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! 👍
You are so correct. Many people including myself skipped over the box model when learning since it is boring but it would have saved me so much time if I understood it properly.
This video is a equivalent to a holy scripture like Bible/bhagwat Geeta for people to understand how to design apps be it on Android/iOS/web.This was helpful for me as a flutter developer.
Did not know the margins collapse. Thank you.
It is something that I did not realize for a long time as well. It definitely confused me a few times.
But in CSS grid that is no longer the case anymore, then both margins are displayed.
@@komkwam This is the case for CSS flex as well
ya , this help me a lot
what would be the idea behind margins behaving like that, very confusing!!!
Thanks for elaborate on CSS box model, keynote:
- Use margin to set apart between adjacent elements
- Each element will have padding, border, margin attribute
- Use box-sizing: border-box to get actual size of element without specify width or height of elements
From Odin Project
Odin Project FTW!!!! We got this, and our future is bright :D
Gets tricky with the height and width being eaten up after box sizing, but you make it easier to understand! Thanks!
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
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!
This was the fastest 8mins I've spent on a coding video. Love the conciseness
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.
still consistent from odin project starting to realize how css is important to learn dont rush over
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
I don't know what it is about this video but every other explanation of the box model I've encountered so far just completely threw me. Thanks so much for breaking down such an important concept so perfectly
The way you explained too easily is amazing. Got cleared many doubts. Thanks a lot
I thought I would never get it.
I'm coding web for 8 years. And the thing with margin that you showed right now which it uses 30 from this and 70 from this, I didn't know that. In my mind it was always 70 + 100 of the other element. I'v got to check it.
That is what I made this channel for. I want to help everyone understand web development as deeply as possible
no way!
There is a MDN article on this topic:developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing 😀
Same here with the overlapping margins. Yikes. You'd think that more people would talk about that in learning resources.
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!
I'm really glad I was able to help. Good luck on your future learning!
Excellent explanation. This is by far the clearest I've found so far. Thanks!
Thanks! I am really glad you enjoyed it.
0:13 - Introduction
1:06 - Content
1:20 - Padding
2:05 - Border
2:25 - Margin
2:56 - Visualization
4:22 - Margins collapse
5:24 - Height and Width
6:02 - Border box
7:10 - Chrome Dev tools
7:25 - Take aways
Margin Collapse surprised me, didn't know thanks :)
The folks at The Odin Project were right. This is really very important and having this fundamental knowledge will indeed end a lot of frustration and suffering in the future. Thanks! If only I knew this in the past 😜
*realizing I’ve spent a couple weeks trying to understand something you explained so clearly in 8 minutes*
Thank you!
Thank you. I was very confused on margin and padding until I watched this!
Still one of the best channel for leaning web dev in 2024
this dude is pure gold
Thanks!
I learned so much in 8 mins. It's very easy to understand the way you explained. Thank you!
Your videos are making a positive difference in everyone; the way of teaching has erased my long-term confusion in the concept. Keep it up bro, and keep making videos like these!
If the Odin Project considers your channel quality content, then you earned a sub. I've seen a lot of other TH-camrs and they're more about themselves and being mental health career gurus than programmers. Don't sell out.
When I was originally learning about HTML and CSS on my own in high school I could have really used resources like this.
I remember trying to align elements without the assistance of the box-sizing property. I would have to try and remember to subtract any padding and border from the defined height and width of any element and it felt like a monumental pain in the ass. This was exacerbated by the fact that I had not committed to memory that the usage of margin is crucial in spacing, causing me to severely overusing padding to do so.
i am taking an online course and i am just stucked here thank you sir for this clear explanation
Thank you so much for this video. My brain just totally burnt out in my WebDev course and you were able to explain it in a way I can actually take in.
i watched lots of video nobody explained this correctly but you do thank you
Here from The Odin Project!
Thank you, this was so simple to understand. You're a great teacher
Extremely helpful, didn't have a remote idea that the margin was shared between two elements...Concise explanation, thank you.
I learned more from this 8.5 minutes than most tutorials online! Thanks.
Thanks man!I truly appreciate you taking your time to help people on youtube get the content we need.
Much Respect from KENYA 🇰🇪
Thanks a lot, you made it so much easier to understand by using crystal-clear explanations and live examples!
Thank you very much man❤
cheers! I'm doing this at Uni and you made a complicated page very simple.
u r simply the best ..... dont know how u make concepts and topic so clear and easy .
I finally understood the box model because of you! Thanks a lot sir! You really cleared my confusion!
after 2 years I've finally understand the use of box-sizing property
omg that is the purpose border box I couldn't understand it till now :) good job explaining thanks
Best explanation ever thankyou so much Kylle
Great video, i tried skipping css and going straight to react/nextJs…suffice to say i found myself here not long after building up my logic knowledge so i can actually do something with it!
If you've found your way here through the Odin Project, best of luck on your coding journey!
Key Takeaways
1. Every CSS element is a box.
2. We can use padding increase size of our boxes.
3. Border goes around padding
4. Margin goes around border and adds spacing
5. We can use inspect to see model
6. We can also set width and and height
7. If we add margins to the second box, the box above it will compare the margin it has with second box and the larger margin will be the space between them.
8. Height is shown as 180 because 100 + 20(padding) + 60 (border).
9. We can use box-sizing to make it actual height we specified in code. Suppose we change padding or borders, other numbers adjust by itself.
10. We can use chrome dev tools to understand box model in a better way.
enjoyable, clear and easy. you are the one to whom I search whenever I stuck in any web situation, thanks for uploading videos for us .
Bro, you are a G for putting this video together! I paid for a course that fumbles the bag in explaining this concept. haha smh
dude i finally understand the margin... I never knew it collapses to the largest value! Now things make sense!
You got my sub! You're amazing and thank you very much for this! Really really appreciate it! Vielen Dank!
shoutout the odin project
Thank you and to The Odin Project for such helpful information! I do not know how I was learning more advanced things without full understanding of this essential topic.
You videos are helpful for last minute interview prep !
This is prolly the best tutorial 🆖
this is great. as a PM learning to code, this was helpful.
im learning and sharing my journey on the channel. come say hi :D
So what I've learned is that when box-sizing property is set to content-box(default). It assumes specified height and width is of content box only. When set to border-box, specification is meant for border box, accounting for padding, content and border as well.
Woah I never knew about the larger margin rule! Thank you so much!
Awesome explanation my teacher could not adequately explain to me.
Kudos! Excellent presentation and pace and style. You could teach a udemy or community college class for money for sure. Thanks! I'm just starting to learn CSS3
I’ve been struggling understand this concept. Amazing tutorial ❤
Who is from The Odin Project?
me)lets gooo
what a great surprise! I already knew your chanel, and The Odin Project linked this tutorial in one of the chapters!
This is so helpful. I forget the deets of the box model if I haven't used css in awhile so this is good for the oh yeah, I remember it now.
You make this easily understandable and I will now subscribe, thank you!
The explanation on using border-box was useful.
Thank you! This really helped me understand CSS better!
This is one of the best videos I have seen that explains it perfectly!!! Thank you so much!!!
Thank you my friend, because of you I was able to figure out CSS!
Hello from The Odin Project!!!!
Big thank you to you bro, this is teaching me so much. Im going to create something really big.
Wow, I dont even know box-sizing before. Awesome video
It is one of the best CSS properties in my opinion.
Clearest explanation wow ! Where did you learned that (clear and concise explanation), any source ?
finally I complete understood the box model. thanks 🍎
You should've mentioned we should measure an image width by "px" and not "%" in order to get the correct measurement of a box e.g 100px x 100px. You are amazing tho i got this idea by watching your video thanks :)
Thanks for the explanation of the box model. This was the best I have seen. Clearly explained and WHY. Thank you much.
This saved a lot of headache, very fundamental, thank you 🙏
Thank you! This video really helped me understand this concept.
Great work there, Very Simple To Understand
Great stuff! Thank you for such an insightful video
Okay, let me understand box-sizing : border-box; So basically, we use this property to retain the actual size of the element that we have set. In the case of this video, the content height was 30(border)+10(border)+40(actual content)+10(padding)+30(border). And same spies to the width. of the actual content. If this property is not used, the size will be more than what we had set it to be. Am I correct ? If not please do correct me.
This here is a masterpiece.
Thank you so much for this. Its a lot better to understand. I ended up joining a bootcamp, but didn't quite mention the overlapping.
Do you have a video as well for HTML arranged? for example, content inside the box model?
BEST and PRECISE explanation EVER !!!
(for myself, with all do respect for other authors)
I went through quite a number of other videos;
Thank you. Everything is a box. I need to think outside the box.
funny enough I find HTML and CSS itself easy but the Box Model is a whole new level on its own!! But saying that, this video has cleared things up so well so I guess it's remember the name that's the hard bit of which one do which. Again to remember them i guess it's only a consist of doing them again and again. like a teacher that have to remember a child in school class, after teaching for few times then teacher will remember who's who :D
Thank you so much! now I know when to use them rather than hovering over my box model every time :)
So clearly, so easy to understand.
Wow, this was much easier to grasp than from my Udemy course.
Thank you for explaining man! thumbs up.
your explanation is easy to understand, thanks for the video 👍
THANK YOU. I was struggling with this, you made it easy to understand =].
Thank you the words are crystal clear. Much love
Thank you so much! Now i finally understand the box model :D
everyone talking about odin project thats great. im only here due to crippling depression
Thank you for your clear explanation
this really sorted things out for me, thank you! :D
you really made it make sense buddy. thanks!
Thanks!! You example the information very well.