box-sizing: border-box explained

Key Takeaways

so what's the deal with this box sizing border box that you see pretty much used everywhere ever no that's what we'll be looking at in this video if you new here my name is Kevin and here at my channel we learned how to make the web and have it look good while we're at it with weekly tips tricks and tutorials and on Fridays we try and do it in five minutes I haven't done a five minute Friday in a little while so let's just jump right into it though if you've been following me for any length of time or if you've followed any other tutorials or just seen CSS on other websites you've probably seen box-sizing border box and it's usually set to Universal selectors something like this but why does everyone do it it's you know what's the point of it well to understand box sizing we have to understand the box model so just a really quick refresher to make sure you're comfortable with that in CSS elements are made out of the content box itself as well as the padding the border and a margin and by default box sizing is set to content box so that means that when we give something a width or height we're not setting the size of the element we're setting the size of the content box so let's look at this here where I have my content box and I've given it a width of 500 pixels so you can see it is 500 pixels and I've put this brown box underneath is just acting like a scale I might as well zoom in this so it's not actually 500 pixels so zoomed in but it makes it a bit easier to see what's gonna happen on this content box if I come and add some padding of say 25 pixels and we're gonna see it's actually and yet wider than this box so it's now my 500 pixels plus 25 on this side plus 25 on that side so it's actually 50 pixels wider and if I come and add a border on here the border of let's say 5 pixels solid red just so we can see it and that's also adding to the total size of my box so now we're getting bigger and bigger so even if I take my padding off of that actually and we can see that it's still sticking off the side here because the border is giving it this extra width that's the default behavior and honestly it's a bit annoying having that behavior on there because if I'm gonna come down to my border box box here which is this one underneath obviously and it will set our box sizing to border box I still have a width of 500 pixels on here but now if I come and add padding of 25 pixels and hit save it's adding it inside by changing the box sizing to border box we're now including both the padding and the border in there as well and I'm only using widths now but Heights this the same thing would apply to it so here we can also come and add a border of 5 pixels solid red and hit save and that border is also on the inside instead of being on the outside so it's a nice way to the border box by resetting the box sizing on it it just makes things a lot easier to control and a lot more predictable you don't have to start doing math or adding things up not that it's difficult but it's just an extra layer of complexity that you don't really need so setting a width or setting a height and the instances where you need one and knowing that the padding or the border are just included in that just makes it so much easier and it's also important that you are doing it on the before and after because the universal selector by itself like this will not select su elements so just to make sure that it's applying to everything you'll probably want to do it like that and you might have also seen it done something like this where instead of being done like that you'll actually see here it's being set to work box sizing inherit and then what people do is on the HTML they set the box sizing to border box so it's always anything you create it's going to inherit you know everything is inheriting it and it's inheriting it from my HTML here so it's going to win and this is always going to take into account this and the reason you might see this come up is sometimes something might actually explicitly be set to this box sizing content box for some reason or maybe you're importing something from another project where the default was never changed and it screws up things you could explicitly set content box on that and even though I have this on a universal selector this is overwriting it so the children that would be in here and everything dealing with this would still be using the box sizing content box whereas the rest of my site would be using the border box so it's considered a little better practice it depends on your project whether you want to and I have put a link to a CSS tricks article down below if you do want a little bit more information on this specifically and that's it I hope you like this video I hope this enlightened you a little bit if you've been seeing box sizing and you did weren't really sure what it was doing I couldn't work without it or I could because I did for a long time but I'm so happy that we have this and it makes it just so much easier to work as a default so I hope you liked the video if you did please hit that thumbs up to let me know leave a comment down below if you have any comments or questions come and join us in the community there's a link to it in the description below it's a discord server come ask questions hang out just have a good time a big thank you to my patrons for helping support everything I do here if you don't know of a patreon it's a really cool service where you can support creators who give you lots of value so you can check that out there is a link to the in the description as well a big thank you to Lauren who's my supporter of awesome just thank you so much for the super generous support and I think that's it so until next time don't forget to make your quantum e internet just a little bit more awesome