Padding & Border

[00:00:00]
>> Kevin Powell: I usually try and look for other ways to set a height on something because heights are a bit of a problematic thing in general in CSS and luckily another part of the box model opens that up, which is padding. So if I come in with padding and we'll start with padding 100 pixels, just so we have an amount on there. That's the next part of the box. First it's the content-box, then it's the padding. I've added 100 pixels of empty space all around the element.

[00:00:28]
That's all it's doing, but it includes the background color. That's really important. If you have a background image that we're going to be looking at soon, it also includes the background image. So padding is empty space with background, and it gives me that all the way around. Now padding is a shorthand. You can see it's adding it on the top, the bottom, the left, and the right. So we have the longhand padding top.

[00:00:50]
This is the physical, we'll look at the logical in a second, padding. Oops, padding right. Having left. And I'm going to put bottom here. Padding bottom here, and I probably should have done all these at the same time, but I'm just going to hold control or command on Mac in if you're in CodePen, put them all at 100 pixels. So that's the exact same thing. I made a mistake, bottom. There we go. So, if you do the padding shorthand of the 100 pixels, it's the equivalent of this.

[00:01:32]
The inline version is replacing all of these, and this is where, not the inline, sorry, the logical version of it is replacing all of these with their logical equivalents, which is where things get a little bit wordy because padding top, we talked about up and down is our block axis, so it becomes block start. That doesn't change anything. You'll notice the height, the syntax highlighting here in CodePen is not happy with me, but it is a valid property and it is well supported.

[00:02:00]
Padding on the right becomes inline end because it's on the inline axis, left to right, and at the end of it. The padding bottom becomes the block. And the padding left becomes the inline start. So that's the logical equivalent. The reason I put them in this order of, let's go back to the physical, just because it's a little bit easier to wrap your mind around it, but I do want to show these, we'll be using them more.

[00:02:28]
The reason I put them in this order is because when we use the shorthand, this is the order that they're applied in. It starts at the top and it goes clockwise or back around. So if I did want different values on all of these using the shorthand. I could say 100 pixels, 200 pixels, 50 pixels, 0, if I wanted to, and I made a typo. Oh, I forgot my closing curly brace. I deleted that. So, 100, 250, 0.

[00:03:03]
If I take one of these off, it gets a little bit strange. Cause now it's doing top is 100, the right and the left are 200, or it's still going around clockwise, so we do 100, then we do 200, then we do 50, but then we don't have a last value, so it uses the same one that we had on the opposite side. And if you only have two values, then it's going and doing top and bottom are 100, left and the right are 50.

[00:03:31]
One of the advantages of logical properties is something that we don't have with the physical ones. I use this all the time. Padding block is your top and bottom only. So I can say 100 and it will give me a top and bottom without touching the left and the right, instead of having to set it to 0 or something else, cause maybe there's something else that's adding a padding to another class or something.

[00:03:53]
And then I can do a padding inline, we'll just say 50, so the values are different. And then I have a padding on the left and the padding on the right of 50 pixels. I love these two shorthands, and again there's no physical side equivalent that will only pick the top and bottom or only pick the left and the right. Since I'm talking about logical properties and physical properties, the one downside.

[00:04:18]
Of the padding shorthand is there's no logical version of it. It will always be top, right, bottom, left, every time. There's work being done to change that, but there's very little momentum behind it right now. But there might be a keyword or something added at one point that can turn the shorthand into logical, but for now, if you use the shorthand, it'll always be the physical sides. That's padding.

[00:04:40]
The next one in the box model is border. Border is a funny property because it's actually, there's lots of parts to a border. We have a border, I'm going to mess it up because I always use the shorthand. Let's start with a border color so we can say what color we want. Let's do green because it is stand or we'll do orange, I think will stand out well on the purple. When I do a border color. Nothing will show up because I'm missing some other declarations.

[00:05:10]
I also need to have a border width. So how big is my border going to be? 10 pixels, and I'm still missing another thing. Which is my border style. And for now I'm going to put solid. With all three of them, I finally get something showing up. And you'll notice it's on all the sides. These are shorthands as well. I'm not going to go through the entire thing because it works exactly the same way that the padding did, and it's going to get repetitive, but I could say all three of these are just.

[00:05:43]
A left. And then it will only show up, whoops, I always do that. The left goes first. Border left style, border left color, border left width and all that, then I only have the border showing up on one side. You can do this with your logical properties as well, so let's do it on the right, or we'll do the bottom, so bottom would be block and just to show you that it does work, and then it goes down at the bottom, or I could just say block and it would be on the top and the bottom.

[00:06:12]
The fun thing here is very rarely will I write out a full declaration for a border like this. Having 3 properties for something is kind of long. So we do have options of just declaring the border and then putting the 3 values of the space between them. So I could say 50 pixels, orange and solid. And then I have it showing up on all the sides, or I could just say border block, and it's only on the block axis, etc.

[00:06:42]
The nice thing with the shorthand, unlike some other CSS shorthands, is it doesn't matter what order you put them in. I could mix this up and put it in any order. And the reason, whoops, sorry. This was solid. We can put them in any order because we have 3 different types of values. CSS is actually a typed language. So this is a length, this is a color, and I don't even know what the solid would be considered, but it's a different type than the other ones.

[00:07:08]
So, because there are 3 different types of values, the order of them doesn't matter. Just means you make the border you want. One of them is optional, the optional one is the color. If you don't set a color, it will use the color of the text. So I can't see it right now, but if I change my color to red, the border will match the text color. So sometimes that can be handy. In this case, probably not.