Transcript from the "Editing Default Margins" Lesson
[00:00:00]
>> Jen Kramer: So what would happen if I wanna put these two paragraphs down here on top of each other? I don't want any space between them, just the line, just the border. What am I gonna do to put these two paragraphs down here in box two? I want to put them on top of each other, what should I do?
[00:00:20]
Yeah.
>> Speaker 2: Could you use the p tag and put in zero margin?
>> Jen Kramer: Right, so first of all, we have to determine where that space is coming from. Where is that space coming from between those paragraphs? Its margin, that's assigned to which tag?
>> Speaker 3: The P tag.
>> Jen Kramer: It's assigned to the paragraph.
[00:00:39]
Right, so we know that, that space in between is margin coming from the paragraph. So what we need to do to get rid of it is do what? We need to say the paragraph would have margin of zero.
>> Speaker 2: Don't need to specify RAM, or pixels or anything just zero.
[00:01:02]
>> Jen Kramer: Zero is zero, you can say zero RAM, you can say zero percent, you can say zero pixels it doesn't matter. Zero is zero, so you can just say plain old zero.
>> Jen Kramer: Yeah.
>> Speaker 2: You can put the margin with the other p tag also, can't you? You don't have to have two separate?
[00:01:20]
>> Jen Kramer: Yes, we could. We could certainly combine these two styles. Absolutely, we could combine those two styles.
>> Speaker 2: Okay, I was just, that's what confused me.
>> Jen Kramer: [CROSSTALK] Okay, yeah, that's fair. Yep, we can totally combine those two styles. Okay? Yes?
>> Speaker 2: Could you do that for just box2?
[00:01:40]
>> Jen Kramer: We could do it just for box2. How do we do it just for box2?
>> Speaker 2: Could we put a comma after the box2 class?
>> Jen Kramer: So what do you want me to do here?
>> Speaker 2: Put a comma after box2
>> Jen Kramer: Put a comma after box two.
>> Speaker 2: And add in the P.
[00:01:59]
>> Jen Kramer: And put in a P.
>> Speaker 2: Yeah.
>> Jen Kramer: So what does that selector say? Dot box two comma p, what does that actually say? Yes,.
>> Speaker 2: Box two and paragraph for box two.
>> Jen Kramer: For box two and for the paragraphs. But we want the paragraphs inside of box two.
[00:02:16]
What does our selector look like when we do that?
>> Speaker 3: Use dot instead of comma.
>> Jen Kramer: Use a dot instead of a comma. Well, we put a dot in front of our class names, that is true.
>> Speaker 3: And then .p.
>> Speaker 2: P.box 2
>> Jen Kramer: P.box2 that would be a paragraph with a class of box2.
[00:02:36]
>> Speaker 2: Box2 p?
>> Jen Kramer: That's it, box2 p, box 2 space p. So for all paragraphs inside of box2 we're gonna apply this style so see that that applied to those paragraphs down there on the bottom but not to the one in box 1. Let's do something else here in Box2.
[00:02:59]
So I'm going to change my html in box2. I'm going to go ahead and add an h1. My heading.
>> Jen Kramer: Okay. So down here in box two I've gone ahead and added an H1.
>> Jen Kramer: All right? So you see we've got my heading and then I have a big, great big huge space.
[00:03:25]
And then I have my paragraphs. Something that's very common and people wanna do, is they look at that big space, especially designers, they look at that big space and they go, that's too much, I want less space. How do we go about making that less space? Anyone wanna take a guess?
[00:03:45]
>> Jen Kramer: Yeah?
>> Speaker 2: Heading with some negative properties?
>> Jen Kramer: Well, that might be one possibility. Do we have to go negative?
>> Speaker 2: Or zero?
>> Jen Kramer: Could be zero. What do you think?
>> Speaker 2: The same way that we assigns like a different margin to the P, do the same with an H2 or H1.
[00:04:08]
>> Jen Kramer: The same with the h1?
>> Speaker 2: Yeah.
>> Jen Kramer: Yeah, so if we said h1 has got margin 0, like that. Cool, all right? So that definitely got rid of that space there. Well, let me show you this. This is because we have zero margin on our h1 and we have zero margin on our paragraph.
[00:04:38]
If I get rid of the margin on my paragraph, what happens now?
>> Speaker 2: Default comes into play.
>> Jen Kramer: We're back to that space in between the heading in the paragraph, aren't we? Because the paragraph has a margin, right? The heading has a margin. If we wanna get rid of all those margins, we need to get rid of the bottom margin on the h1 and the top margin on the paragraph in order to get rid of that big gap.
[00:05:04]
Okay. So the way that code would look would be margin bottom, 0, or sorry, margin top on the paragraph. And on the h1, it will be margin-bottom, 0. So now, I've just gotten rid of the space between the heading and the paragraph. You have super fine control over the placement of all of these elements on the webpage.
[00:05:37]
The hardest part about the whole thing is figuring out first of all, a, where is the space coming from? Okay, the space cut which which HTML tag did that space come from? And is the space margin or is it padding and once you know those two things you can eliminate or create any space you want on your webpage.
[00:06:00]
That's what I'm trying to demonstrate here. How's everybody doing? You okay? All right. Yes.
>> Speaker 2: Are there any defaults that you would run into where the browser is just like overpowers whatever you do?
>> Jen Kramer: No, that's a great question though. No, there is not a spot where the browser styles will quote overpower or be more specific than what you write in your own style sheet.
[00:06:26]
That's part of the cascade. The browser styles are the least specific of all and they're very easy to override with your own style sheet. Done by design.