This is by far the best CSS property. I remember when I first discovered this I felt like I unlocked CSS God powers, and now I cannot imagine writing any CSS without it.
Coincidentally, I was thinking about searching around for its purpose yesterday while trying to sleep and this video appeared this morning lol. Thanks for posting this, Kevin. You are very helpful.
Hey Kev! I am new to web dev and have been taking up the Odin Project for some time now. It' has been challenging to learn all these new concepts from various resources. I read all these things theoretically, understand it a little bit and then I finally come to your videos which makes it SO MUCH BETTER. I get to really understand the concept in suchha subtle way! Defo joining your patreon once I get a job on this path! :) Kudos to you, I hope you're doing good.
@@capp1306 I finished the foundations and did 25% on the intermediate and then paused it because I wanted to learn front-end first so I switched to react. Now I got an internship at a local company for the backend on Laravel. Odin Project foundations really helped me develop the HTML, CSS, JS skills required to do the basic frontend part of web-portals. It was comparatively easy for me to learn Bootstrap/Tailwind next on advancing on commercial CSS. Well, focus on the course and build things for yourself every week. If you run into any problem ask and search alot. I know you didn't ask for advice but I did it anyway haha. Anyways, if you need help and stuff regarding the course or anything around it you can get me at ergasiamellow@gmail.com. Goodluck :)
@@capp1306 im 6 months in, currently doing todo list project, if you have time, do study webpack 5 if you want to early on if you're choosing fullstack JavaScript, since that's one of the most frustrating topic you'll come across in fullstack JavaScript, but anyways odin project is pretty good, i feel confident with my skills
Dude thank you so much. This 5 min video made more sense to me than hours and hours of reading about border-box.I just couldn't understand it for the longest time until now!
THANK YOU so much, I saw that property in a lot of vídeos but I never tried it bc i thought I'm never gonna use it but now I see how useful it is, thanks so much!
Thank you so much for this video...this is one of those CSS things I never really got around to learning and you were able to explain it masterfully in 5 min. Kudos to you sir.
Omg thank you, after watching few videos I came across this one and the penny has finally dropped, thank you so much, your visual example was the best one I saw!
Truely helpful Kevin! I had a situation where I was changing attributes on a box and wasn't understanding why they weren't doing what I expected. Now I know. You are definitely worth the Patreon account. (Edited: For spelling)
Basically with the default value of box-sizing: (content-box) the box will be expanded across the viewport if padding or border is included. Because those components/ parts will take part in the total width/height of the box. With box-sizing: border-box the total width/height of the box equals the specified width and height. Border and padding are not included in the total width but they reduce the inner width/height of the content. As a result the padding/border look like now they are reversed into the element (text looks shifted).
Thank you! Didn’t realize I had to set the universal selector to box sizing as well.. I only put it in my body and html and was wondering why my divs were still expanding!! Phew. Thanks, Kevin
Fantastic explanation of one of my favorite lines of code. I like the advanced practice of adding it to pseudo-elements. Never thought or heard of that practice before. The part about incorporating other code where the rule was different was nice too. I recently ran into this. Very neat presentation.
Thank you, thank you, thank you! This has been driving me nuts when it came to designing full view layouts because those nasty scrollbars would pop up out of nowhere.
Man I beg you... Please create a tutorial about scroll efects on websites. There is nowhere good explanation of all this. Im talking about showing some objects only when we scroll to this section, any other animations that more and more websites use nowadays. It gives our static website a bit of power and interaction that makes the user feel that this is so professional :) or some kind of scrolling only between sections - when we scroll only once on mouse it still gives us another section etc (we dont have to do it manually). Please keep upvoting this post to allow Kevin see it, maybe he will help us! :) Greatings!
I see 99% of comments (some will slip through for sure), no need to upvote :) - I've got something sort of planned for this already, but it might be awhile.
@@KevinPowell thank you. if i were you i would put a bit more functionality into your movies, to make it useful on real websites. waiting for another projects, greatings!
Was looking for this. Thank you! Also, make a video regarding footer. How to place it at the bottom of the page when there is not enough content covering the whole viewport height between the navbar and footer.
@@crousdioll I've tried position fixed which obviously scrolls with the page. I have tried position absolute, but then it doesn't stick below the content. Giving a min-height of 100% to body also didn't seem to help.
Really, I don't understand. I mean, in the universal selector (*) when you write "box-sizing: border-box", any "box-sizing: content-box" you write after will overwrite the "box-sizing: border-box" of the universal selector (*). That's why I don't understand why to use the inherit trick. Maybe I'm wrong. Can you explain me pls?
@@sammas533 because what if you have 10 divs under a container? Instead of giving all those 10 divs content-box , one could simply give their parent container the box-sizing: content-box and all those divs will inherit it. Easily reduce redundancy.
min 3:05 I didnt quite understand what you mean with the pseudo elements, could you explain please? I actually dont understand the whole action of the like *, *:: .... I know what they mean on their own but not quite what they do together like * ::before {box-sizing...}
This is by far the best CSS property. I remember when I first discovered this I felt like I unlocked CSS God powers, and now I cannot imagine writing any CSS without it.
This plus flexbox
@@IhsanMujdeci What about CSS Grid?
@@ne9835 I sadly under utilize that property. Do you like it?
@@IhsanMujdeci Property? CSS Grid isn't a property or are you talking about box sizing?
@@ne9835 CSS grid is quite new compare to flexbox and therefor it has less browser support.
How to resolve 2 years of CSS frustration. That should be the first property learnt in any CSS lesson
I don't understand your question please 🤔
Coincidentally, I was thinking about searching around for its purpose yesterday while trying to sleep and this video appeared this morning lol. Thanks for posting this, Kevin. You are very helpful.
Hey Kev!
I am new to web dev and have been taking up the Odin Project for some time now. It' has been challenging to learn all these new concepts from various resources. I read all these things theoretically, understand it a little bit and then I finally come to your videos which makes it SO MUCH BETTER. I get to really understand the concept in suchha subtle way! Defo joining your patreon once I get a job on this path! :) Kudos to you, I hope you're doing good.
How has been you progress so far? I Just started CSS on the Odin Project.
@@capp1306 I finished the foundations and did 25% on the intermediate and then paused it because I wanted to learn front-end first so I switched to react. Now I got an internship at a local company for the backend on Laravel. Odin Project foundations really helped me develop the HTML, CSS, JS skills required to do the basic frontend part of web-portals. It was comparatively easy for me to learn Bootstrap/Tailwind next on advancing on commercial CSS. Well, focus on the course and build things for yourself every week.
If you run into any problem ask and search alot. I know you didn't ask for advice but I did it anyway haha. Anyways, if you need help and stuff regarding the course or anything around it you can get me at ergasiamellow@gmail.com. Goodluck :)
@@capp1306 im 6 months in, currently doing todo list project, if you have time, do study webpack 5 if you want to early on if you're choosing fullstack JavaScript, since that's one of the most frustrating topic you'll come across in fullstack JavaScript, but anyways odin project is pretty good, i feel confident with my skills
Is that a practice project? My main goal is security. My plan is to learn just front-end to make money, if I like full-stack I'll try But not now
better explained than forums and courses! Thank you. You saved my time!
+
+
+
I'm not sure I would have kept learning CSS if not your explanations that make things so much easier. Thank you for the videos, Kevin!
I had trouble understanding this while reading a lesson about it so I came here and now I'm good. Thanks again for your videos, they are the best!
Man, there are tons of channels out there for Web development topics, you are by far THE BEST! Keep going Kevin.
This is most concise video tutorial from kelvin that he did not rant. No wonder Bing search of all, suggest this to me. great one. keep it up.
Thanks, Kevin. You have a very pleasant voice and you explain things well! Two thumbs up!
So far, the best explanation of this concept... I got the required visualization. Thank u for showing your mercy on us.
Dude thank you so much. This 5 min video made more sense to me than hours and hours of reading about border-box.I just couldn't understand it for the longest time until now!
This is by far the best (visual) explanation for box-sizing.
I have watched about 5 videos trying to understand this concept and I got it right away with your video. Thanks so much.
THANK YOU so much, I saw that property in a lot of vídeos but I never tried it bc i thought I'm never gonna use it but now I see how useful it is, thanks so much!
been watching your videos for no reason. Cause love the way you explaining. Cheers!
Thank you so much for this video...this is one of those CSS things I never really got around to learning and you were able to explain it masterfully in 5 min. Kudos to you sir.
Omg thank you, after watching few videos I came across this one and the penny has finally dropped, thank you so much, your visual example was the best one I saw!
Truely helpful Kevin! I had a situation where I was changing attributes on a box and wasn't understanding why they weren't doing what I expected. Now I know. You are definitely worth the Patreon account. (Edited: For spelling)
I watched this video with 'Call Me' by 90sFlav in the background and it was such a treat. Thanks for the content!!
Awesome! I had never seen the 'box-sizing' property until I started seeing your tutorials. So, this explanation helps a lot! Thanks for posting!
You're the true king of CSS, thanks a lot!
Basically with the default value of box-sizing: (content-box) the box will be expanded across the viewport if padding or border is included. Because those components/ parts will take part in the total width/height of the box.
With box-sizing: border-box the total width/height of the box equals the specified width and height. Border and padding are not included in the total width but they reduce the inner width/height of the content. As a result the padding/border look like now they are reversed into the element (text looks shifted).
Thank you! Didn’t realize I had to set the universal selector to box sizing as well.. I only put it in my body and html and was wondering why my divs were still expanding!! Phew.
Thanks, Kevin
So very useful, and so concisely presented. Thank you Kevin
Thanks. Honestly I was feeling like an idiot for not understanding this concept but making a very visible demonstration of this solved it for me.
I feel like a great weight has been lifted off my shoulders, thank you Kevin!
Your voice and intonation is so ASMR.
Best explanation I've seen so far
east or west kevin powell is the best for css
box sizing actually confuses a lot visited many websites but this video helped me alot.
This is literally the cure of all my problem with css right now holy sh*t
It has actually changed my life today. Thank you for the explanation :)
Oh my god, I was looking for this explanation I was facing a design problem for many days now its sovled ! thank you so much
finally found one video where i totally clear my doubt . THANK YOU SIR
Thanks for explaining this in a much more understandable way
Have been web dev for two years and feel betrayed no one has informed me of this trade secret
Better late than never!
Fantastic explanation of one of my favorite lines of code. I like the advanced practice of adding it to pseudo-elements. Never thought or heard of that practice before. The part about incorporating other code where the rule was different was nice too. I recently ran into this. Very neat presentation.
Thank you, thank you, thank you! This has been driving me nuts when it came to designing full view layouts because those nasty scrollbars would pop up out of nowhere.
you cleared the doubts codecademy planted in me in 2 minutes! you're awesome!
You are really good on picking up topics to discuss. Really helpful discussion. Thanks a lot❤️❤️❤️
btw... I love your video cover photos... This one with you scratching your temple looking confused... LOL!!!
Glad you liked it :D
Thanks Kevin, happy to follow your video's, learn a lot !
That one bit about inherit . Super genius
This has actually just solved a problem I was having with a layout. Thank you sir!
I use to hate CSS until I found your channel!
Border box is a game changer for sure 👍
Simple and straightforward explanation. Thank you.
Great explanation in a short video! Thanks so much Kevin :D
This is awesome Kev.👍 I've always been wondering why you say it makes our lives much easier
Kevin, you are awesome!
love to see your new video, thank for sharing.
Thanks for this one, I always wondered what it was, often confused.
I was having no idea about the box now I got to understand thanks a lot.
Thanks Kevin Powell for the awesome tutorial
Thanks for the information. Learning CSS.
Always clear and helpful. Thanks a lot Kevin!
This was very enlighting . Thanks Kevin
Thank you. This is simple and easy to understand.
Thank you for another great tip Kevin!
Absolutely on point. Awesome.
Man I beg you... Please create a tutorial about scroll efects on websites. There is nowhere good explanation of all this. Im talking about showing some objects only when we scroll to this section, any other animations that more and more websites use nowadays. It gives our static website a bit of power and interaction that makes the user feel that this is so professional :) or some kind of scrolling only between sections - when we scroll only once on mouse it still gives us another section etc (we dont have to do it manually). Please keep upvoting this post to allow Kevin see it, maybe he will help us! :) Greatings!
I see 99% of comments (some will slip through for sure), no need to upvote :) - I've got something sort of planned for this already, but it might be awhile.
@@KevinPowell thank you. if i were you i would put a bit more functionality into your movies, to make it useful on real websites. waiting for another projects, greatings!
This video was such a help. When I am able to I am going to buy some shirts!
Great explanation, thank you, Kevin
best explanation on youtube.
Thanks i was waiting for this video 👍
Top shelf, as usual!
one of the most useful info in 5 mins :D
Box sizing border box NOW CLEAR.... Thanks!!!!
Was looking for this. Thank you!
Also, make a video regarding footer. How to place it at the bottom of the page when there is not enough content covering the whole viewport height between the navbar and footer.
you can use position
@@crousdioll I've tried position fixed which obviously scrolls with the page. I have tried position absolute, but then it doesn't stick below the content. Giving a min-height of 100% to body also didn't seem to help.
@@baabla okay see this: stackoverflow.com/questions/39794712/how-to-make-footer-go-to-bottom-when-there-isnt-enough-content-on-page
@@crousdioll alright will check it out. Thanks!
Best Explanation Ever !
The box-sizing: inherit is a nice trick!
Really, I don't understand. I mean, in the universal selector (*) when you write "box-sizing: border-box", any "box-sizing: content-box" you write after will overwrite the "box-sizing: border-box" of the universal selector (*). That's why I don't understand why to use the inherit trick. Maybe I'm wrong. Can you explain me pls?
@@sammas533 because what if you have 10 divs under a container? Instead of giving all those 10 divs content-box , one could simply give their parent container the box-sizing: content-box and all those divs will inherit it. Easily reduce redundancy.
Really helpful tutorial
you teach very well, thank you so much.
Thank you kevin for short and simple explanation.
subscribed and liked :-)
Precise explanation, thank you!
border box saved my life
Thank you Kevin.
this was very usefull ! thank you so much kevin
really helpful thanks for this amazing tutorial. 🔥
Finally! Thank you!
thank you Kevin.
Thanks, this was very helpful!
U make amazing video. very much simplified
Thank you so much! You explained it so well.
Very good explanation
Thank you so much. great explanation
Outstanding, clear and concise explanation ✨ Thank you, Kevin.
Hi Kevin could you make a video on the overflow Property?
helped me to remove a "calc" statement, thanks!
Thank you for this!!
Thanks much u r my css guru love from india
You made it look easy.
Gracias, nice and clear explanation
Thanks for this!
Thanks Kevin
min 3:05 I didnt quite understand what you mean with the pseudo elements, could you explain please? I actually dont understand the whole action of the like *, *:: .... I know what they mean on their own but not quite what they do together like * ::before {box-sizing...}
Wow, thank you very much for this explanation!
love it. it's helpful my project
Well explained !
Very nice explained sir. Loved it