Hi everyone, this video is about Box Sizing and Border Box, and its magical-ness. We've got these boxes here, I want to add some padding to the inside, to just align all this stuff up, but when I do that, padding added, and the boxes got bigger. You just add padding, and it seems to make the boxes bigger; weird. So we're going to add Box Sizing and Border Box, and magically we've got Padding, but they didn't get bigger. No more minusing the padding from the size and width of the boxes. It's magic, let's work out how to do it now in VS code. 

So what is this magic box sizing border box goodness? It relates to a Flexbox again. It's one of its nice little add-ons for HTML5. It's got great browser compatibility, and what it means is we can add padding without breaking our boxes. You'll notice that we've danced around, like we've put padding at the bottom of the P-tag to push the bottom down. We added padding to the top of our icon. We added padding to the P-tag here on the left and the right, to keep it away from the edges. Why didn't we just add it to the card itself, just put a border around the outside, that's easier, right? Because it breaks it. 

So what we're going to do is, let's prove the point. Let's go to our card, actually let's add a couple of Classes, do it in one big go. So let's do Card1, Card2, and then Card3. So you can do them all in one big go, as long as there's a comma there. You'll notice, before, we did a Compound-- where is it? This one here. This means these guys have a relationship to each other, A-tags inside of cards, whereas this thing we're making now is, this comma, and this, and that, they're all like separate little things. So commas separate them out, if it was without the commas, it would be looking for a Card3, that is inside of a Card2, that is inside of a Card1, which doesn't exist. 

So we're going to add Padding. We're going to do it all the way around, just do 20 pixels. Save it, let's have a little look. It kind of blew out the edges here. It went too far, so it didn't add it to the inside, weirdly it adds it to the overall size. If we make it even bigger, say we get it up to 50, you'll notice that just goes bananas, they all start pushing into each other. Ours is not breaking too badly. So the Padding's there, 50 pixels, but it adds it to the size, and that's where Border Box works. 

So what we can say is, actually add that Padding, but we're going to do Box Size, Box sizing, and we're going to use Border Box. Hit 'Save', and the cool thing about it is it removes it off the widths now. It's just a nice easy way to do it. We're going to remove the stuff off the Padding that we've done, also off the P-tag, so we've cleaned it all up, because we just, I danced around it for a long time, because I feel like you're ready now, ready for Border Box, Yeah, it just-- because what you could do is you could go through here and say, actually okay, so we're going to do that, and then we're going to start minusing off the width. 

So we're going to say width equals, 'width=', minus, and you can start trying to minus off what you add the Padding to, and it just does you hidden. So that's what you had to do. So let's fix this, so we've got Border Box, come back, Border Box. Let's first of all get rid of all of the other things we did. So we did, under the P-tag, we did Margin Bottom, which, we do need that, it's Cards Bottom we did. So we did margin around this thing. We still need the margin just above it, so we'll do Margin Top, definitely, Margin-Top, but we don't need all of the rest of this. 

What do we use? We used, 30, left and right, and 20 at the bottom. You were like, "Why wouldn't we just keep doing that way?" Because we don't get to learn Border Box if we do it, just leave it this way. And you're going to run into it in code, and you're going to run into that problem of it, just like, "Hey, let's just put padding around it, why is it adding to it?" Same with the margin, it just adds it to it, but if you want to, magically minus the margin or the padding off the overall width of the box, use Border Box. So let's go and do that, let's find-- I'm getting a bit lost now, you might be the same. 

Okay, Border Box, So the padding in this case is going to be, at the moment if you just put in one attribute, it goes all the way around, remember. So the top in this case-- what have we put over the I-tag, so Padding Top 30, because that's what we put kind of in this top bit here. So we're going to do this fella, and say, top is going to be-- what did I just say? 30. Okay, 30 pixels, or G pixels. The left and right, it's going to be 30. Don't use semicolons at the end of them. So top, right, bottom, can't even remember now, 20? We'll have a look at it. Don't put that in there, and the last one is 30; awesome. 

So that should work. Let's have a look, here we go, if I saved it, I have, nice. Kind of a backwards way to do it, right? I just kind of kept this a little bit later on in the course. So now, probably when I first put my cards in I'd add the padding, before I dumped all this stuff into it, and just make sure I use Border Box on those cards. You can use them in individually, so this could be in--

I could cut that and put it inside all of the cards, and I have it in there three times. I've just kind of kept it separate for this video. Is that better, I'm not sure it's saving much Type, but anyway. Does that make sense? I hope it did. Without it, turn it off, let's have a look. The boxes just get it's original 30% plus this padding, and I could minus that off the 30%, but minusing 30 pixels off percentages is mind blowing, for me at least, so it's better just to add it to it, and then turn Border Box on. 

All right, job done, high five. I will see you in the next video.