Default Margin

[00:00:00]
>> Kevin Powell: Awesome. So it's not perfect. If we change the size of this and we play around with it a little bit, it's going to start looking a little bit funky, but at least we're getting there in the right direction. We've reused a lot of custom properties. We've brought in the padding, some margin on things, started creating a little bit of a layout, and things are starting to come together. But this is where there's a little bit more to margins.

[00:00:21]
So I talked about this before where margins are very much like padding, but I lied to you a bit on that one because there's a few differences. The first one's not really a difference, but we do have margin that is on the body that's coming from the user agent styles. That's the default styles that are being applied by the browser. Every browser uses 8 pixels as the default, so most projects you are going to remove that.

[00:00:44]
You can also use auto margins to center things. This is unique. You cannot use auto padding for anything. It will just compute to zero. But auto margins can center things. It's kind of weird. There's a few exceptions to how that works, but you can. And margins can collapse into one another, which is something that causes a lot of people a lot of headaches, and we'll be exploring it now. The first one is the default margin.

[00:01:06]
Very common, you do this on every single project that you do, because as we can see in our project, we have this white border going all the way around the edges. So, the simplest fix, and some projects don't need this. If you don't need it, you don't have to declare it, but very common that we do a margin of zero. Now this causes a problem because when we do that, it fixes it here under hero, but we can see why that comes with the browser default, because now this is touching the edge here, and that looks kind of ugly that it's stuck up on the side.

[00:01:36]
I don't really like that. It makes it harder to read, so that's why the user agent has that as a default, just to make sure that it doesn't happen. But we'll leave that for now. We'll come in with a fix shortly for that. The next thing is that we can horizontally center block elements using a margin inline of auto or a margin left and margin right of auto. You can't use a margin top and bottom of auto.

[00:02:02]
It just computes to zero on a block element, but you can do it on the left and the right to be able to center it. So in this case, I mentioned a few things were a little bit broken. I'm just going to go full screen here for a second and open up my dev tools. Because, you know, at these really large sizes, that's where things don't look fantastic, but as we're getting smaller, we want to allow that to happen.

[00:02:25]
But when things start stretching a lot, we can start running into some problems. So this is where the idea of constraints can come in. So we can add that constraint to start with. That's our hero content. So if I go find that all the way down, hero content, I might say, again, we don't want to give this a width of say 900 pixels, because if I do that, then we get overflow if the screen is too small.

[00:02:51]
So instead of that, I want a max width. That means it will never get bigger than that size. And again, let's just zoom out so we'll see it in action. It will never get bigger, it won't stretch, but if the browser is small enough, then it will allow it to shrink, so we're working with those constraints. The only thing is it's kind of weird that we have empty space over on the right, so that's where a margin inline of auto comes in or it will center it that way.

[00:03:20]
I prefer doing this. You'll see a lot of examples that just do a margin of 0 auto, so 0 on the top and the bottom, auto on the left and the right. Maybe you want something that has this that also has some margin on the top and the bottom, and then you might end up with two classes that are conflicting with one another. One's adding margins to something, another one's saying that it should be zero, then order comes in.

[00:03:44]
If I can, I want a property that does one thing and one thing only, so a margin inline, I know it's only touching the left and the right, not touching the top and the bottom, so that works perfectly and it centers my content. We can also use that down here and set the constraint down there. I don't have anything to hold the content, but we could build something in there to do that same type of thing just to make sure that that area isn't affected either, and we could do the same thing in the middle.

[00:04:17]
I'm going to do it everywhere for now, so this could be my footer content. And then over here, okay, we have a footer content. We can do that same thing too, but then there's this middle area. We're running into the same problem. Naming things is hard. What do I call that? Let's just go a bit bigger with VS Code for a second, where this whole area is the middle section all the way up to the end of the main.

[00:04:39]
So I need to come up with a name for this. Don't copy this. I'm going to use it just for now, where I'm going to come in with a div class is my middle, because this is the type of thing I see a lot of people do, and we'll talk soon about a better approach here. But we can do like a middle in the middle over here. And now I want both the middle section and the footer content, or yeah, the footer content.

[00:05:17]
So maybe we do a middle comma footer content. We need the same constraints as before, so a max inline size of 900 pixels and a margin inline of auto. And then we take a look at what that looks like in the browser. Okay, that's actually looking a lot better than what it looked like before. It's holding the content in the middle of the page. It's, you know, everything's looking a little bit nicer. The width of the things is more or less the same, so we're using our constraints, we're setting things, we're using our auto margins now to center it as well.

[00:05:51]
There's a few red flags that might be coming up right now, but at least we're pushing things in the right direction. Everything seems to be working. One problem just really fast here is if we get too small on this side, we're going to be touching the side of the screen again as long as the overall size here is less than the 900 pixels, because we set that constraint to say don't get bigger than 900 pixels.

[00:06:16]
But now if I'm that size, it means I'm actually still touching the edge, which is a little bit annoying. So what we can do in that case is we just need a little bit of extra space on the sides. It needs to be empty space, but in this case we can use padding just because it's going to add the empty space we need. There's no background color, so we're not going to see it as padding, but we get to say that we have padding inline of something.

[00:06:44]
I use 1 rem, 2 rem that equals 16 pixels. So it's just a common number. If you use a pixel value, completely fine. And now if we take a look at our page, we actually built that little buffer in. So at large screen sizes, we're okay, and then at the smaller screen sizes, we're building that buffer on the two sides. Probably take that same approach at the top and the bottom here where things are starting to get a little squished, because as this is getting narrower, because we put a ton of padding on there, it might start looking kind of funky.

[00:07:16]
And for layout related things, I find a lot of padding on the sides tends to cause a little bit of problem, and that's where instead of doing it just with this massive amount of padding on the sides, I sort of want to separate concerns a little bit about how this is getting created. So over here, we already have this padding. I can use that same trick on this hero content over here, where margin inline might be like that, my padding block might be 50 pixels, and then my padding inline can be 1 rem or 16 pixels or anything like that.

[00:07:48]
So I'm adding a lot on the top and bottom because nothing else is going to cause that, but on the left and the right where things are going to start squishing, I sort of want to allow that to be able to squish, except I'm putting that on the wrong element. I do apologize. I wanted to put that on the hero itself, on the part with the orange background, because the top and the bottom, I need that padding on the top and the bottom of the orange.

[00:08:19]
There's no other way that I'm going to be able to create that. But on the inner part here, I can do this as padding block on the top and the bottom of the yellow and a padding inline of 1 rem or 16 pixels on the left and the right. Because I'm using that container section in the middle, I'm holding that the hero content. I'm holding it. I've set a constraint on that. I know it's never going to get bigger.

[00:08:41]
So as the page gets wider, we get more and more yellow content. That doesn't have to be padding because this piece is being held in the middle, and then once we start getting into the narrower view parts and things do get smaller, we've just added that small buffer on the left and the right side there, and we can do the same thing with our footer, but we'll save that for the next lesson.