box-sizing: border-box explained

[@WebDevSimplified]

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.

[@IhsanMujdeci]

This plus flexbox

[@ne9835]

@@IhsanMujdeci What about CSS Grid?

[@IhsanMujdeci]

@@ne9835 I sadly under utilize that property. Do you like it?

[@ne9835]

@@IhsanMujdeci Property? CSS Grid isn't a property or are you talking about box sizing?

[@komkwam]

@@ne9835 CSS grid is quite new compare to flexbox and therefor it has less browser support.

[@patatasfritasviewer]

How to resolve 2 years of CSS frustration. That should be the first property learnt in any CSS lesson

[@programming8304]

I don't understand your question please 🤔

[@pancakemaxita]

better explained than forums and courses! Thank you. You saved my time!

[@beatzoid]

+

[@Tussu17]

+

[@desidev69]

+

[@alexdoe6524]

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!

[@sjn_]

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.

[@salakosunday]

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.

[@chiefplankton8307]

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]

How has been you progress so far? I Just started CSS on the Odin Project.

[@chiefplankton8307]

@@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 [e-mail]. Goodluck :)

[@zaid4708]

@@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

[@capp1306]

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

[@nataliadi9]

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!

[@jackmeister9482]

Man, there are tons of channels out there for Web development topics, you are by far THE BEST! Keep going Kevin.

[@start-media]

This is by far the best (visual) explanation for box-sizing.

[@sum_itt20]

So far, the best explanation of this concept... I got the required visualization. Thank u for showing your mercy on us.

[@lazzawhite4746]

I have watched about 5 videos trying to understand this concept and I got it right away with your video. Thanks so much.

[@martinmohammed4087]

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).

[@secure_the_bags620]

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!

[@GLHD-tl2hl]

been watching your videos for no reason. Cause love the way you explaining. Cheers!

[@damianduran5427]

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!

[@fahanyc3638]

Thanks, Kevin. You have a very pleasant voice and you explain things well! Two thumbs up!

[@programmingplug9536]

You're the true king of CSS, thanks a lot!

[@esagecantu]

Simple and straightforward explanation. Thank you.

[@awhitechilliify]

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!

[@alexgochenour8740]

So very useful, and so concisely presented. Thank you Kevin

[@samhatake]

That one bit about inherit . Super genius

[@TheCocoaDaddy]

Awesome! I had never seen the 'box-sizing' property until I started seeing your tutorials. So, this explanation helps a lot! Thanks for posting!

[@noodlespwn42]

I watched this video with 'Call Me' by 90sFlav in the background and it was such a treat. Thanks for the content!!

[@denhamk]

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

[@josegarboza3825]

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.

[@TheCodeDealer]

Thanks for explaining this in a much more understandable way

[@MP-mh1tu]

Best explanation I've seen so far

[@smrutiranjan4444]

finally found one video where i totally clear my doubt . THANK YOU SIR

[@Dawid-lb8fe]

It has actually changed my life today. Thank you for the explanation :)

[@javieru5871]

Your voice and intonation is so ASMR.

[@mariodlp]

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.

[@m.smanoj4688]

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.

[@crstfrdrnt]

you cleared the doubts codecademy planted in me in 2 minutes! you're awesome!

[@MuhammadSaid01]

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

[@adarshpandey2978]

You are really good on picking up topics to discuss. Really helpful discussion. Thanks a lot❤️❤️❤️

[@mariopizzaro]

Thanks Kevin, happy to follow your video's, learn a lot !

[@hannah51238]

This has actually just solved a problem I was having with a layout. Thank you sir!

[@BimaAgungSaputra-gt4px]

This is literally the cure of all my problem with css right now holy sh*t

[@briankk8]

Thanks Kevin Powell for the awesome tutorial

[@x3zlo]

Great explanation in a short video! Thanks so much Kevin :D

[@siriusgd4753]

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)

[@HostDotPromo]

Border box is a game changer for sure 👍

[@rebelmachine88]

I feel like a great weight has been lifted off my shoulders, thank you Kevin!

[@yutthanayahan7784]

love to see your new video, thank for sharing.

[@chlouis-girardot]

Always clear and helpful. Thanks a lot Kevin!

[@DragonRoyZ]

Thank you. This is simple and easy to understand.

[@louisgamor]

This is awesome Kev.👍 I've always been wondering why you say it makes our lives much easier

[@nawendusingh2858]

best explanation on youtube.

[@TheImaginativeSachin]

This was very enlighting . Thanks Kevin

[@beec3694]

Thank you for another great tip Kevin!

[@rekan_98]

I was having no idea about the box now I got to understand thanks a lot.

[@busyrand]

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.

[@SumanRoy.official]

Thanks for this one, I always wondered what it was, often confused.

[@rick5522]

Kevin, you are awesome!

[@DianaTan]

Thanks for the information. Learning CSS.

[@sumitsharma6738]

Box sizing border box NOW CLEAR.... Thanks!!!!

[@ralexand56]

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.

[@nelsonR]

Precise explanation, thank you!

[@asmahamdym]

I use to hate CSS until I found your channel!

[@oleksiipetrenko3824]

Great explanation, thank you, Kevin

[@owlthetyto]

Absolutely on point. Awesome.

[@justinlinn1810]

Have been web dev for two years and feel betrayed no one has informed me of this trade secret

[@KevinPowell]

Better late than never!

[@MauriceLacerda0]

The box-sizing: inherit is a nice trick!

[@sammas533]

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?

[@jimhalpert9803]

@@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.

[@eminm6383]

one of the most useful info in 5 mins :D

[@GigMyRig]

Outstanding, clear and concise explanation ✨ Thank you, Kevin.

[@alulapetros6048]

Best Explanation Ever !

[@anuj7286]

Thanks i was waiting for this video 👍

[@lawrenlelko]

Top shelf, as usual!

[@__jake.m]

Thank you so much! You explained it so well.

[@siriusgd4753]

btw... I love your video cover photos... This one with you scratching your temple looking confused... LOL!!!

[@KevinPowell]

Glad you liked it :D

[@Platinum989]

This video was such a help. When I am able to I am going to buy some shirts!

[@Krenil.]

really helpful thanks for this amazing tutorial. 🔥

[@sourabhkulkarni1731]

Thank you Kevin.

[@MrMinutmen1]

you teach very well, thank you so much.

[@atarixle]

helped me to remove a "calc" statement, thanks!

[@baabla]

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]

you can use position

[@baabla]

@@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.

[@crousdioll]

@@baabla okay see this: stackoverflow.com/questions/39794712/how-to-make-footer-go-to-bottom-when-there-isnt-enough-content-on-page

[@baabla]

@@crousdioll alright will check it out. Thanks!

[@Kirsehirli40able]

Wow, thank you very much for this explanation!

[@shubhamkohli7719]

Really helpful tutorial

[@SadanandPamadi]

Very nice explained sir. Loved it

[@sagormajomder]

Thank you so much. great explanation

[@HowTo-nr7uk]

Thank you kevin for short and simple explanation. subscribed and liked :-)

[@erykkryszewski5803]

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!

[@KevinPowell]

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.

[@erykkryszewski5803]

@@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!

[@charlesmullen8024]

border box saved my life

[@yaqubuabdulmalik2869]

Very good explanation

[@mertefe4345]

thank you Kevin.

[@Ken-ke9bi]

Thanks, this was very helpful!

[@suleman234]

this was very usefull ! thank you so much kevin

[@Saf9838]

Finally! Thank you!

[@zenithkokkodan7037]

U make amazing video. very much simplified

[@revvnijaa4177]

Thanks much u r my css guru love from india

[@fabrizioalpuche5984]

Gracias, nice and clear explanation

[@abhishekshah11]

Great explanation!

[@adamfirdaustan6415]

Thank you for this!!

[@_us.m.an_]

You made it look easy.

[@israphial]

This was really helpful, thanks.

[@anangyoga1381]

thank you, Kev!

[@totitotojatiwijayanto521]

love it. it's helpful my project

[@martinlinden937]

Thank you! very good explanation

[@mohamedashif7487]

oh great, Made me understand within minutes.😀