box-sizing: border-box explained

You probably see box-sizing: border-box used all over the place. I use it in my tutorials, it's used in most written and video content I see. In this video, I take a look at what border-box is, and why it's really awesome.
CSS-Tricks article I mentioned in the video: css-tricks.com/inheriting-box...
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

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

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

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

[@ihaverhinitis]

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

[@beatzoid]

+

[@Tussu17]

+

[@desidev69]

+

[@lazzawhite4746]

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

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

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

[@fahanyc3638]

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

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

[@jackmeister9482]

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

[@adarshpandey2978]

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

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

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

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

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

[@sum_itt20]

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

[@chlouis-girardot]

Always clear and helpful. Thanks a lot Kevin!

[@GLHD-tl2hl]

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

[@alexgochenour8740]

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

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

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

[@start-media]

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

[@x3zlo]

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

[@Dawid-lb8fe]

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

[@noodlespwn42]

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

[@yutthanayahan7784]

love to see your new video, thank for sharing.

[@mariopizzaro]

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

[@beec3694]

Thank you for another great tip Kevin!

[@hannah51238]

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

[@smrutiranjan4444]

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

[@programmingplug9536]

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

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

[@esagecantu]

Simple and straightforward explanation. Thank you.

[@TheImaginativeSachin]

This was very enlighting . Thanks Kevin

[@louisgamor]

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

[@owlthetyto]

Absolutely on point. Awesome.

[@nelsonR]

Precise explanation, thank you!

[@SumanRoy.official]

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

[@briankk8]

Thanks Kevin Powell for the awesome tutorial

[@rick5522]

Kevin, you are awesome!

[@MP-mh1tu]

Best explanation I've seen so far

[@lawrenlelko]

Top shelf, as usual!

[@oleksiipetrenko3824]

Great explanation, thank you, Kevin

[@DragonRoyZ]

Thank you. This is simple and easy to understand.

[@TheCodeDealer]

Thanks for explaining this in a much more understandable way

[@rebelmachine88]

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

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

[@anuj7286]

Thanks i was waiting for this video 👍

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

[@BimaAgungSaputra-gt4px]

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

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

[@rekan_98]

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

[@__jake.m]

Thank you so much! You explained it so well.

[@HowTo-nr7uk]

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

[@asmaahamdy48]

I use to hate CSS until I found your channel!

[@Kirsehirli40able]

Wow, thank you very much for this explanation!

[@mohamedsafwtattar9838]

Finally! Thank you!

[@javieru5871]

Your voice and intonation is so ASMR.

[@DianaTan]

Thanks for the information. Learning CSS.

[@suleman234]

this was very usefull ! thank you so much kevin

[@sourabhkulkarni1731]

Thank you Kevin.

[@Ken-ke9bi]

Thanks, this was very helpful!

[@Krenil.]

really helpful thanks for this amazing tutorial. 🔥

[@SadanandPamadi]

Very nice explained sir. Loved it

[@crstfrdrnt]

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

[@sagormajomder]

Thank you so much. great explanation

[@MrMinutmen1]

you teach very well, thank you so much.

[@adamfirdaustan6415]

Thank you for this!!

[@alulapetros6048]

Best Explanation Ever !

[@aat5968]

Well explained !

[@shubhamkohli7719]

Really helpful tutorial

[@Platinum989]

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

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

[@HostDotPromo]

Border box is a game changer for sure 👍

[@babylikescoffee]

Thanks for this!

[@zenithkokkodan7037]

U make amazing video. very much simplified

[@israphial]

This was really helpful, thanks.

[@yaqubuabdulmalik2869]

Very good explanation

[@abhishekshah11]

Great explanation!

[@martinlinden937]

Thank you! very good explanation

[@fabrizioalpuche5984]

Gracias, nice and clear explanation

[@mertefe4345]

thank you Kevin.

[@totitotojatiwijayanto521]

love it. it's helpful my project

[@diamondz6105]

Thank you so much! This really helped

[@anangyoga1381]

thank you, Kev!

[@GigMyRig]

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

[@nawendusingh2858]

best explanation on youtube.

[@vansh9857]

Thank you it helped a lot!

[@memomemo-uc6pv]

thank you for this cool tutorial

[@atarixle]

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

[@FATM452]

Excellent, Thanks

[@praveenrajsr2112]

Awesome explanation thanks🙂

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

[@samhatake]

That one bit about inherit . Super genius

[@eminm6383]

one of the most useful info in 5 mins :D

[@Divyadharshini_]

Well explained 🤞

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

[@shrookwageh5976]

the best explanation

[@SparklesBohanson]

Thanks Kevin