HTML & CSS for Absolute Beginners: box-sizing

Key Takeaways

now there one last thing that's really important about the Box model and that it's that the default way that boxes are sized is wrong or maybe that's a bit of a strong statement but it's a bit of a universally agreed one actually and to highlight that I'm going to come on my paragraphs where we have uh some sizing on here uh with some padding and I'm actually going to make the uh padding a little bit bigger and let's refresh that so we have a decent amount of padding coming all the way around on that uh let's make the Border a little bit bigger to and refresh that just we can see that we have the padding then we're adding the Border even though that color comes underneath it with the dots uh and so we have the content box plus the padding plus the Border happening right there and so if I come on my paragraphs here and I'm going to say they have an inline size of let's say 400 pixels and hit refresh there so we can see it and so we've set their width to uh 400 pixels if you're using the non-logical version that would be width right there and we have 400x there let's come and change this padding now to 100 pixels and hit refresh notice how it's gotten bigger and now let's come here on on this now and make the padding 200 instead they get bigger again and this sort of makes sense we set the size of the element we're adding our padding and then we're adding our borders on top of that the problem is it makes it really hard to work with elements because a lot of the time when you set a size and like visually the padding looks like it should be part of that size but we're not setting this the size on the element itself we're setting the size on the content box which is this little area in here and then we're adding these other things on top of it which it just it's it makes sense which is I think why that became the default uh and that's the way the behavior works but in practice it's really inconvenient because when we think of the size of the element we're thinking of it to include all of the visual parts of it which includes our very pretty borders and background colors and things that we're putting on there so I'm going to uh decrease this ridiculous padding down to 50 for now uh just to show what we can do to fix this and the common way we fix this and this is part of what most people call their CSS reset where one of the very first things they do and I do this on my projects too is you put a star at the very top and that's a star selector and if you put a star like that it's actually selecting every single element on your page and so what we could say on this we've selected every single element and there's a property called box sizing and we want to change it to border box and I'm going to hit save and I'm going to refresh and you can see that actually got smaller and now if I come and take a look down here and we can actually fix this color that I had a typo on from earlier as well if I come back down to my paragraphs here and now let's we have our par that set up and now if I add some padding here let's make it smaller if I do that as 20 and now let's bring this up to 100 just to show you that when I refresh that it's staying at exactly the same size and the padding is moving inwards which means the content has less room so the elements have to grow in their block size or in their height so this when you're actually working on elements where you're adding padding to them becomes a much more intuitive way to work just because visually speaking we want the size to include everything we see on the element so this is one of the most common things at the top of every CSS file that you'll ever see is this star box sizing border box like this and we have to do it on the star selector which is selecting everything because we and and not put it on the body like we've done for our font properties here because box sizing is not an inherited property and it would be kind of convenient if it was in a way but it's not and so we have to select every element and put it on there in general you want to avoid doing this you do not want to put stuff on your star selector if you can you want to rely on inheritance instead it's a much better way to work but inheritance is something that applies to your font properties your colors your font size your font families all of those things it's not something that generally applies to margins and spacing and layout type things cuz imagine if you were to put a margin on your body and that inherited and every element got more margin on it or you added a border on something and then all of the children in there also got a border on it that would be really awkward so layout things and Box model things and all of these other things aren't inherited it tends to only be uh these ones right here so just really quickly to say that I would suggest putting putting a box sizing of Border box at the top of your CSS file and just remembering to put that on every time uh cuz it will make your life a lot easier in the long run and with that done I am going to come all the way back down here and just remove this silly example that I've been using for the last few lessons where we've been exploring the Box model