Transcript from the "Padding" Lesson
[00:00:00]
>> Jen Kramer: So we have margin. Margin is outside of the border, margin can be positive or negative. We could move things around in space, right? Separate boxes, bring boxes together with margin, make sense? Okay, so let's go on to the next one, which is called padding, all right? And we'll, Dave answer this one.
[00:00:21]
So we've got all this text, it's all shushed up against the edges of the box, right? Is that a good look? Probably not, right? We'd probably like a little bit of space around that. So Dave, what should we do?
>> Dave: Let's move it to the right.
>> Jen Kramer: Let's get it off the edge of the box.
[00:00:39]
>> Dave: Yeah.
>> Jen Kramer: Yeah, let's get it off the edge of the box here. So on my div property let's go ahead and say padding left one RAM. Now I have a question for you.
>> Jen Kramer: If you look at these boxes, right, we just put padding on the left, and it moved off the left border.
[00:01:03] But it already looks like we have some space associated with the inside of the box on the top and the bottom. Anyone notice that? See, my border isn't smashed up against my text on all four sides, right? It's only smashed up against it on the left side. And if my window was a little smaller, we could smash it up against the right side too, right, like that.
[00:01:28]
>> Jen Kramer: Make sense, okay? But I'm trying to catch my browser, there we go. But we don't, we actually have a little bit of space here on the top and the bottom. Where is that coming from? Anyone want to take a guess? Yeah.
>> Student2: Margin.
>> Jen Kramer: Is it margin and if it's margin, margin from what?
[00:01:50]
>> Student2: Okay, so it's more like the padding.
>> Jen Kramer: It could be padding. Where's it coming from?
>> Student3: The browser, the default.
>> Jen Kramer: The browser default is putting in what?
>> Student3: CSS.
>> Jen Kramer: Yeah, it's definitely CSS. Yeah, Ryan.
>> Ryan: The divisions.
>> Jen Kramer: The division is doing this, the div tag?
[00:02:10]
Not the div tag.
>> Student2: P tag.
>> Jen Kramer: It's the p tag. And how do we know that? Okay, well, let's talk about how we can go about diagnosing these problems and issues. We put in a p tag and we put in a border, one pixels, 2 pixels solid green.
[00:02:35] That's gonna put a line right around our paragraph. This is really useful. Using borders are really useful way to help diagnose problems and issues you might be having inside of your code, okay? So if we put a green border around all of our paragraphs, you see how tight the paragraph is around, right?
[00:02:54] There's no padding on the paragraph, but there's clearly some space between the outside of the border and our div tag here, right? So that must be what? A div tag has no padding or border or margin on it. This space must be what? Margin from our paragraph, okay?
[00:03:19]
And where is that coming from?
>> Ryan: Not from the browser.
>> Jen Kramer: That's coming from the browser. Because otherwise by default, all of our paragraphs would be all smushed together on top of each other. If we looked at a web page with, quote, no styling, right, like the ugly web pages we made on HTML day All of our paragraphs will be all stacked on top of each other.
[00:03:40] So the browser's putting in a little bit of margin on the top and the bottom of your paragraph to space your paragraphs out. If you quote, don't apply styling, which really means you don't apply your own styling, there's just browser styling in place, make sense? So and you can also see here that we pushed our paragraphs in, you can see that there's a space over there on the right hand side, between our paragraph and our div.
[00:04:03]
But not, sorry, on the left hand side, but not on the right hand side. See how the paragraph goes all the way up to the edge here of the div, on the right hand side. Because we didn't set a right margin. Make sense?
>> Jen Kramer: Or right padding, where did I do that.
[00:04:23]
Padding-left, see, so in here on the div, I have a padding-left of one rim but I don't have a padding-right, make sense? So we can add that too, padding-right.
>> Jen Kramer: And now both of those are off the edge, yeah?
>> Student2: Can you use text orient center in a p tag to-
[00:04:52]
>> Jen Kramer: You can.
>> Student2: I mean, to do the same thing as the padding, or
>> Jen Kramer: No, well, it doesn't actually do the same thing-
>> Student2: I'm sorry, the margin.
>> Jen Kramer: Okay.
>> Student2: Centered in the green border.
>> Jen Kramer: So what did you wanna do here? You wanna do a margin left?
[00:05:11]
>> Student2: Yeah, do you have to do margin left so you can kinda center it in that box or would you use a different one to center the text in the box?
>> Jen Kramer: So we could do it this way, margin left and a margin right, okay? So now what is the space now to the left of the paragraph.
[00:05:30] The total space to the left of the paragraph. So, our paragraph has one rim of margin on the left. And we have in our div we have one RAM of padding on the left. So, the total space on the left side is two RAMs, right? Did you see it twitch when I put in the additional styling?
[00:06:01]
>> Jen Kramer: I just lost you. [LAUGH]