Grid Margin

[00:00:00]
>> All right, so we are moving on to 8D. And in 8D, I just wanted to do a little demo here about margin and grid, and bring up some points about margin and grid that can be confusing to wrap your head around, and that kinda make people very confused sometimes.

[00:00:21]
This is not nearly as fun, but it is kind of an important topic. So let's take a look at our beginning code pen here. So I've given you a pretty simple example here. No fun images, sorry about that. So what we have here is a div, and inside of this we have some paragraphs.

[00:00:40]
They have numbers associated with those paragraphs. And we've set this up with grid. So we've said, display: grid. We've got our three columns. We've got our 2 rem gap, and between each of these, and our container has got some padding associated with it. Super, super simple. So does anybody see any display issues here that look really odd or that you're wondering about?

[00:01:06]
>> It might be nice if there were a gap on the left and right?
>> Might be nice if we weren't shoved up against the edges of the page. Absolutely true. Well, here's one thing that comes to mind for me. Here's the gap, the gap is set to 2rem.

[00:01:19]
Yeah, check out the gap here. We have a gap in the column and we have a gap in the row. It should be the same but they are different. What is going on here, right? So what I'm going to do is I'm gonna switch this over to my full page view, and I'm gonna go take a look at this in Developer Tools.

[00:01:45]
Okay, where's my inspect? Inspect, look at it. So here's my grid, we can turn that on. And you can see the hatched lines here, which we went over earlier, that's the gap. But we also have a little bit of extra space here as well. Where is that extra space coming from?

[00:02:12]
>> Is there an auto margin or padding or something?
>> Well, there is an automatically applied margin, yes. And then it is coming from the paragraphs. So the paragraphs, normally, you have a paragraph, it has a margin on the top, and it has a margin on the bottom, right?

[00:02:33]
And when you have two paragraphs and they meet, what is the difference between the two paragraphs? How wide is that margin, and why? So I have a paragraph. Paragraph has 1 rem of margin on the top, it has 1 rem of margin on the bottom, okay? I have another paragraph, same thing, one on the top one on the bottom.

[00:02:55]
When they meet vertically, what is the distance between the two paragraphs? I know it's very strange, but what happens with vertical margins is that they collapse. And if you think about it, that makes sense. If you have a series of paragraphs on the page, you want them to actually have the same distance between each paragraph, right?

[00:03:14]
If we had margins that did not collapse, we would have 1 rem on the top, we would have 2 rems between each paragraph, all the way down the page, until we had 1 rem at the bottom for the last paragraph. Can you kind of visualize that? Kind of vaguely?

[00:03:34]
Okay, so normally your margins collapse when they intersect, and that keeps you from getting too big of a gap between your elements on the page. So, what's happening here with grid, the margins are not collapsing. We still maintain our margin on either side of our grid cell. So that's the point that I wanna make here.

[00:03:56]
This is what happens when 1 plus 1 in this case is making 4, I think, cuz we've got one round of margin and another rem of margin and 2 rem in the gap. So 1 plus 1 is 4.
>> So it's because the gap is separating the margins?

[00:04:10]
>> And the gap is separating the two margins. That's what the picture here is telling us, the gap is that Red Hat Sharia and the white is the margin that's coming from that paragraph. Okay, so that's what's going on with each one of these. So what we could do here, all right, so I think what I'm gonna do here is, let's get out of this.

[00:04:31]
Let's go back to our source code. And what I'm going to do in my HTML, is I am going to change this just a little bit. So instead of a div with a class of container, let's give it a div with a class of 1. Okay, and then we'll just have a regular old paragraph in here.

[00:04:58]
And let me put in on an h2. Lorem. Okay, so the gap looks a little bit more even, maybe. Let's do this for a couple of these.
>> So is that kinda specific just to paragraph elements?
>> No, that goes for any HTML element. Headings have margins associated with them, as do paragraphs, as do some of the list items have some margin associated with them.

[00:05:42]
And of course, if you add your own margin to any div or anything else like that, you will find that those margins will behave in the same way if they are vertical. Horizontal margins do not collapse. It's just the vertical ones that collapse. This is 2, right? Yeah, okay, so there we go.

[00:06:02]
Now that I've put it inside of a div, okay, so now I have a div, I have an h2 and I have a paragraph inside of it, our gap looks much more even here now, yeah? Okay, so we don't have a giant gaping gap here down at the bottom.

[00:06:18]
So that is one possible way to fix this particular item. And the other thing that you could absolutely do as well, is you could say something like h2, p {margin: 0;}. And that would also help tighten things up and give you a more even gap in between your various boxes here as well.

[00:06:41]
So the big point that I wanna make here is this. If you are looking at your layout of your webpage and you see something weird going on, particularly in the vertical direction, where your gaps are bigger than expected, think margin. Margin may be your problem, okay? And it may not necessarily be an obvious kind of candidate, like a margin on the outside of a div, it might be a margin coming from a paragraph or a heading or something else.