box-sizing: border-box explained

Подписаться 913 тыс.

Просмотров 219 тыс.

50% 1

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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 255

@WebDevSimplified 5 лет назад

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 5 лет назад

This plus flexbox

@ne9835 5 лет назад

@@IhsanMujdeci What about CSS Grid?

@IhsanMujdeci 5 лет назад

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

@ne9835 5 лет назад

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

@komkwam 5 лет назад

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

@patatasfritasviewer 4 года назад

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

@programming8304 10 месяцев назад

I don't understand your question please 🤔

@ihaverhinitis 4 года назад

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

@beatzoid 3 года назад

@Tussu17 2 года назад

@desidev69 2 года назад

@sjn_ 5 лет назад

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.

@alexdoe6524 7 месяцев назад

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!

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

@josegarboza3825 3 года назад

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.

@lazzawhite4746 3 года назад

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

@fahanyc3638 4 года назад

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

@TheCocoaDaddy 2 года назад

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

@adarshpandey2978 4 года назад

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

@secure_the_bags620 3 года назад

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 3 года назад

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!

@busyrand 5 лет назад

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.

@chlouis-girardot 5 лет назад

Always clear and helpful. Thanks a lot Kevin!

@siriusgd4753 5 лет назад

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)

@jackmeister9482 Год назад

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

@GLHD-tl2hl Год назад

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

@alexgochenour8740 9 дней назад

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

@esagecantu 3 месяца назад

Simple and straightforward explanation. Thank you.

@sum_itt20 2 года назад

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

@damianduran5427 2 года назад

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!

@mariopizzaro Год назад

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

@denhamk 6 месяцев назад

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

@TheImaginativeSachin Год назад

This was very enlighting . Thanks Kevin

@x3zlo 2 года назад

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

@beec3694 5 лет назад

Thank you for another great tip Kevin!

@start-media 2 года назад

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

@hannah51238 Год назад

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

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

@noodlespwn42 3 года назад

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

@yutthanayahan7784 5 лет назад

love to see your new video, thank for sharing.

@Dawid-lb8fe 3 года назад

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

@SumanRoy.official 5 лет назад

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

@nelsonR 5 лет назад

Precise explanation, thank you!

@louisgamor 4 года назад

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

@chiefplankton8307 2 года назад

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 ergasiamellow@gmail.com. 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

@MuhammadSaid01 3 года назад

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

@TheCodeDealer 4 года назад

Thanks for explaining this in a much more understandable way

@DragonRoyZ Год назад

Thank you. This is simple and easy to understand.

@oleksiipetrenko3824 3 года назад

Great explanation, thank you, Kevin

@SadanandPamadi 5 лет назад

Very nice explained sir. Loved it

@owlthetyto Год назад

Absolutely on point. Awesome.

@briankk8 3 года назад

Thanks Kevin Powell for the awesome tutorial

@ralexand56 5 лет назад

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.

@rick5522 9 месяцев назад

Kevin, you are awesome!

@programmingplug9536 2 года назад

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

@DianaTan 3 года назад

Thanks for the information. Learning CSS.

@MP-mh1tu 3 года назад

Best explanation I've seen so far

@rebelmachine88 5 лет назад

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

@sagormajomder Год назад

Thank you so much. great explanation

@samhatake 2 года назад

That one bit about inherit . Super genius

@MrMinutmen1 11 месяцев назад

you teach very well, thank you so much.

@lawrenlelko 5 лет назад

Top shelf, as usual!

@__jake.m 2 года назад

Thank you so much! You explained it so well.

@HowTo-nr7uk 4 года назад

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

@sourabhkulkarni1731 3 года назад

Thank you Kevin.

@Ken-ke9bi 2 года назад

Thanks, this was very helpful!

@Kirsehirli40able 5 лет назад

Wow, thank you very much for this explanation!

@HostDotPromo 5 лет назад

Border box is a game changer for sure 👍

@smrutiranjan4444 4 месяца назад

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

@Krenil. 3 года назад

really helpful thanks for this amazing tutorial. 🔥

@suleman234 Год назад

this was very usefull ! thank you so much kevin

@javieru5871 Год назад

Your voice and intonation is so ASMR.

@anuj7286 5 лет назад

Thanks i was waiting for this video 👍

@yaqubuabdulmalik2869 3 года назад

Very good explanation

@atarixle 5 лет назад

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

@rekan_98 2 года назад

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

@alulapetros6048 3 года назад

Best Explanation Ever !

@shubhamkohli7719 3 года назад

Really helpful tutorial

@fabrizioalpuche5984 2 года назад

Gracias, nice and clear explanation

@zenithkokkodan7037 3 года назад

U make amazing video. very much simplified

@adamfirdaustan6415 2 года назад

Thank you for this!!

@mertefe4345 Год назад

thank you Kevin.

@martinlinden937 5 лет назад

Thank you! very good explanation

@aat5968 3 года назад

Well explained !

@abhishekshah11 5 лет назад

Great explanation!

@asmaahamdy48 20 дней назад

I use to hate CSS until I found your channel!

@totitotojatiwijayanto521 2 года назад

love it. it's helpful my project

@crstfrdrnt 3 года назад

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

@israphial 4 года назад

This was really helpful, thanks.

@Platinum989 3 года назад

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

@vansh9857 Год назад

Thank you it helped a lot!

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

@babylikescoffee 4 года назад

Thanks for this!

@praveenrajsr2112 5 лет назад

Awesome explanation thanks🙂

@diamondz6105 4 года назад

Thank you so much! This really helped

@BimaAgungSaputra-gt4px 10 месяцев назад

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

@SparklesBohanson 4 года назад

Thanks Kevin

@FATM452 3 года назад

Excellent, Thanks

@contraspower6302 3 года назад

Great video❤️

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

@anangyoga1381 3 года назад

thank you, Kev!

@Divyadharshini_ 3 года назад

Well explained 🤞

@martinmohammed4087 2 года назад

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