Styling Inline vs. Block

[00:00:00]
>> Jen Kramer: Do we wanna have any space on the top and the bottom of those clickable, those buttons? Are you happy with the way that it looks? Do you want a little more space on the top and the bottom? Around the word?
>> Jen Kramer: Is that padding or is that margin?

[00:00:18]
So I guess it must be padding. Where are we gonna put that, on the li or the a?
>> Speaker 2: A.
>> Jen Kramer: on the A, okay, why on the A?
>> Speaker 2: Because we're dealing with the item itself, like we want more space.
>> Jen Kramer: Okay, so we're going to put some padding on that.

[00:00:36]
So let's say padding, one rim that'll put one rim of padding on all four sides. Except it didn't actually, did it? What just happened? Well, I haven't told you. In line elements, which are the A's right is there the A's are only as wide as their content their inline elements.

[00:00:57]
You can only add padding to either side.
>> Jen Kramer: And, so you see there that we, actually looks like the border might have moved a little bit. Maybe it's in line with that top border there. But it hasn't really done what we want it to do. We'd actually need to put this padding on the Li for this to work a little bit better.

[00:01:25]
That made really big honkin big buttons. And that's probably a little too much padding. So let's dial that back just a smidge. Okay.
>> Speaker 2: Is that true for margins as well?
>> Jen Kramer: It is not necessarily true for, well yes, actually that is true for inline elements and margins as well.

[00:01:43]
Yep, yeah, that is true. Okay, so before we move on to the clickable area, anybody want a hover state?
>> Speaker 2: Yes.
>> Jen Kramer: Right now, we have lovely buttons, and when we hover over them, nothing happens, right? So let's say that we wanna go to a hover state.
>> Jen Kramer: So how do I write that?

[00:02:03]
Yeah?
>> Speaker 2: A colon hover.
>> Jen Kramer: Is it A colon hover, or is it something else?
>> Speaker 3: I, M?
>> Jen Kramer: It's definitely a colon hover is part of it, but what is this gonna do for me? That's a hover state for every link in my whole document. If I just want to do the nav bar, my what's my selector?

[00:02:29]
>> Speaker 3: Nav a.
>> Jen Kramer: Nav a. Nav a hover, okay? And you can do whatever you want here. But just to keep things moving let's say background color white, color: red. So now when I roll over these buttons, they are going to invert.
>> Jen Kramer: But only in the clickable area, which is the actual a tag itself, see that?

[00:03:02]
It's not the whole button, it's just the word. Anyone bothered by that? Don't you think like if I roll over here on the edge of the button that it is a whole thing should change color? Okay, so this is big trick. When you're working with this a it's an inline element.

[00:03:22]
It's only as big as its content. The Li is a is a block level element. It's as big as its container. We set that up to be 10 rems or something in width. So now what we need to do is somehow we have to figure out how to make our a, which is the only thing that's going to be clickable here.

[00:03:39]
We need to make it as big as the rest of the button.
>> Jen Kramer: So a way to do that, is we need to change it from being an inline element to being a block-level element.
>> Jen Kramer: Does that make sense? So then our A becomes as big as its parent.

[00:03:56]
What's its parent?
>> Speaker 3: LI?
>> Jen Kramer: The LI And now the whole button area becomes clickable. Does that make sense? Okay, so that's actually easier than you might think. Right here on the nav a, all we have to do is use the display property. And we're gonna change our display property to block.

[00:04:21]
>> Jen Kramer: You can see how that's going to then move that clickable area to fill that button area. Except it's not quit going out to the edges. Why is that?
>> Jen Kramer: We have some padding on our li, right? And now that this a is a block-level element, we can move that padding to the a itself.

[00:04:54]
And now, see, we've stretched our whole clickable area to fill the whole button. Does that make sense? Okay, yeah.
>> Speaker 3: Will that trick work for horizontal as well or just vertical?
>> Jen Kramer: It will work for horizontal as well, yep. Okay, how's everybody doing? Have your heads exploded yet?

[00:05:16]
>> Speaker 2: Did you successfully get the background color to change on hover?
>> Jen Kramer: So now the whole button background color changes. See that?
>> Speaker 2: Mine doesn't.
>> Jen Kramer: Yours doesn't? Do you have a syntax error somewhere maybe, missing semicolon, easy to do.