Margin Collapse

[00:00:00]
>> All right, now, our space between our images is pretty good, right here in this section of it. But maybe we'd like to have a little bit more space in between our tour dates and this first image. So, the last thing that we can add here, and we can just add it right here, still inside of our base styling is for main.

[00:00:25]
And I'm gonna set that to a margin-bottom of 4rem. That sounds like a lot. But that space there, here it is. Now, let me ask you this. We know that on the top of those images, we added 2 rems of space, right? And on the bottom of main, we added 4 rems of space.

[00:00:51]
What is the distance between the words Colkirk, Washington, and the top of that image?
>> Six rem.
>> Four rem.
>> I hear six and I hear four. The answer is four. Yeah, two plus four equals four. The reason why is that vertical margin, not horizontal, vertical margin collapses and the larger size wins.

[00:01:20]
So if you have four and two, it collapses to four. If you have two and two, it collapses to two, okay? Something else they don't tell you in boot camp. [LAUGH] Vertical margins collapse, all right? So that is something to keep in mind as well.
>> Is it similar with padding too, or?

[00:01:41]
>> Padding is always additive.
>> Okay.
>> So only the margins collapse, padding does not. Why does margin collapse? Okay, so let's have a paragraph, oops. Arial, font-size 2rem. Okay, so here's a paragraph, right? Yay, super exciting Here's the second paragraph. Here's the third paragraph. Okay, and they all look evenly spaced, right?

[00:02:31]
We have even spacing from the top of the page, even spacing in between these paragraphs, right? In my CSS, let's put in our paragraph and let's make the background-color yellow, okay? So you see we have white space in between each of these paragraphs, okay? Where is this coming from?

[00:02:58]
What is that white space? Why isn't this one solid wall of yellow?
>> Default formatting of p.
>> The default formatting of p, which is what?
>> Margin top and bottom.
>> Margin on the top and the bottom is one rem, okay? Margin top and bottom is one rem, or one.

[00:03:15]
In this case, they're the same thing, okay? So that's what's going on here. So if I said margin 0, then our paragraphs all merge together, right? Okay, so let's say padding is 1rem. Let's see, top and bottom, 1rem 0. So I've just added 1rem of padding to the top and the bottom.

[00:03:46]
Anybody wanna make a comment on that? How does the spacing look? The yellow should help you.
>> There is two rem between each, like, I don't know how to explain it.
>> Yeah, two rem. Right, there's two rem in between each paragraph. What about up here?
>> One.

[00:04:10]
>> 1rem, yeah? Okay, so now all the designers are very upset, okay? So it's better if we have our margin set to 1rem 0, right? Which it is by default. Because now we have one rem of margin and one rem of margin, they collapse to one rem, right?

[00:04:33]
And we wind up with even spacing for all of the paragraphs that are here on the page. Makes sense? So in this case, margins collapsing is a great thing. This is absolutely something we wanna do for a series of paragraphs here to get the same spacing between them.

[00:04:48]
So use padding or margin because margins collapse horizontally. Depends on what you're going for. So we have choices. Make sense? More things they don't teach you in boot camp, right?