Wrapper Class

[00:00:00]
>> Kevin Powell: And here is where there's a little bit of something you need to be careful with, because some people will want to make this the wrapper. Like that, it looks like it should work. Maybe even, you can't drop the hero content because we're adding a background color with it, so that would be problematic, but some people want like a dual-purpose wrapper where it's doing both of these things. In theory, this should work.

[00:00:24]
In practice, it runs into a small problem. Does anyone here notice what that problem is? It's very subtle. It changed some of your padding. Yeah, it changed my padding. I had 50 pixels of padding on the left and the right of my white box here, and that padding is now gone. So that's just, it was very hard to see just because I was hiding the design when I did it. But you can see there's more space on the sides.

[00:00:50]
Again, it's subtle, it's only 50 pixels, but it does make that difference because if we look here, my hero content has padding on it, and here I have padding on it on the inline axis. Those are conflicting. They're both single classes, so the specificity is the same. Order comes into play, the last one wins. Could be they're the other way around. Depends how you organize your CSS. In that case, then it goes the other way around and the wrong one is winning also for potentially other things.

[00:01:17]
So you don't want these potential battles to be coming into place, so instead of that, actually in this case, if we put it the other way around, it probably would work, but I don't want to have to even think about that. So I just don't want a dual-purpose element. I can come here and say this is just a div class is equal to wrapper on the outside. So hero, there's a wrapper, there's the content. And then down here I can close that.

[00:01:50]
And that just means in the structure, hero's setting the background image. Wrapper's holding the content in the middle, the content is setting the padding and the content inside of there. So each one of those has its own purpose, doing its own thing. We've accomplished two things here. Well, first of all, we've actually got, I mentioned the alignment was off a little bit before, so now it's fixed up the alignment of everything.

[00:02:16]
But at the same time, what it's done is in our CSS we have something we can reuse over and over again, which is fantastic, and we've managed to simplify a little bit of what was happening here at the same time. There was no red flags in terms of too many declarations that were happening, but I do want to mention that because I think it's important to bring that up. So in having all of this set up now, it's starting to look really good, but I didn't notice one thing, and it's not a problem that I've really talked about, but one issue is because all of our elements have a margin top and bottom on them.

[00:02:46]
We do end up, our button doesn't, but on the top, we do have an extra margin, and it's not collapsing with the parent, we talked about that a bit earlier because we have the padding on here, but it does mean that we actually have extra space that's getting created. I said I want 50 pixels on all sides. We have 50 pixels, plus we have this extra margin that's coming and actually making that space look bigger.

[00:03:05]
We can use the same strategy we talked a little bit about earlier when we were talking about collapsing margins to solve this type of thing. So for that, I can open up this on my hero, and I could say, actually, in this case, it would be the hero content, not the hero. And we could say that our hero content first-child margin-block-start is 0. And it doesn't matter what this first element is, we know it's never going to have a margin on the top of it.

[00:03:47]
And then we can do the same thing at the end, hero content last-child margin-block-end of 0 and in this case our button doesn't have any, but I still like including both because maybe I remove my button, maybe the button goes back to being an inline link that's in the paragraph before it, so it just becomes more robust. We're making sure that they never will regardless of what type of thing is getting added to this section.