8.1 Inline vs block - Video Tutorials & Practice Problems

<v Michael>All right, one of the most important</v> distinctions when it comes to the box model is the two different kinds of CSS elements, inline versus block, which we discussed earlier in "Learn Enough HTML to be Dangerous," but we're going to go into a lot more depth here. Lee, what are some of the differences between inline elements and block elements with respect to their behavior on the page? <v Lee>Sure, so an inline element is something like a span</v> or a link or just text, and... Except text isn't an element, but you can just think of it that way. It's something that is like a line of text. So if you think of that, if you add another letter or another word to a sentence, it just kind of follows what came before it in the line of text, and when you get to the end of the line, it'll just wrap down to the next one. But each one of those words is not doing its own thing. It's not given its own space. It's all part of this flow of text. So when you have an inline element, it's a part of the flow of text. And I'm putting text in air quotes right there, 'cause it's more... It's the flow of elements on the page. So anything that's an inline element would be treated kind of as if it were another word in a sentence. <v Michael>Okay, one of the things that we covered in</v> "Learn Enough HTML to be Dangerous" is that images are actually inline, which is kind of surprising. <v Lee>Right, even though it looks like a giant</v> big boxy block of pixels. <v ->Right.</v> <v Lee>It's an inline element, and-</v> <v Michael>But we also found that if we floated it,</v> that that actually changed the behavior. It turned it into a block element, then? <v Lee>So, right, once you float something,</v> it'll take on attributes that make it like a block element. And what that means is that... And this is what's really important for the discussion here. A block element can have attributes like height and width and it can have top and bottom margins and padding and that kind of vertical definition of space within the element. If you look at the image here of the box model. An inline element doesn't have that ability to define vertical space, so you can't have- <v Michael>Right, so it's like the margin.</v> you can have a top and bottom margin, but not a left and... Sorry, you can't have a top and bottom margin, but you can have left and right? <v Lee>Exactly, because you're talking about something</v> that's in the flow of text. <v Michael>Yeah, makes sense.</v> <v Lee>So text, you're not really moving it up</v> and down like that. You're just moving it left and right. You might give it a little more spacing or not. Once you float something, it becomes a block element, and suddenly it can take on all these different attributes. So you always have to be careful to make sure that styles aren't cascading down that are giving something surprising margin and padding. The other thing that you have to look at is just the dimensions, as well. So an inline element can't have width or height, and that's because it is... Inline elements, you can kind of think of it like a rubber band. So it stretches to wrap the content, and then if the content shrinks, so does the borders of the inline element. So it's always right around that content. Whereas when you make something into a block element, it takes up the whole width of the page or the section that it's in. it's almost like a box is the best way to think of it. It doesn't matter what you put inside the box. The box has its own dimensions at that point. <v Michael>Okay, and now,</v> one of the things we learned in "Learn Enough HTML to be Dangerous" is that certain elements are naturally inline or naturally block. We've just referred to that with respect to links and images and so on. <v ->Right.</v> <v Michael>But CSS actually gives us the power</v> to change those attributes, right? To change the display attributes. <v Lee>Correct, so using the display styling,</v> we can alter the way that the browser renders different elements on the page, and- <v Michael>Okay, well, let's look at</v> some of the more important examples of that. So take a look at our sample app again. All right, this is where we are, and we're going to play with these social links, these little Twitter links here. So that's here under social styles. And the first one we're gonna look at is a way of actually suppressing the display. This is a really nice one to use in conjunction with JavaScript. You can actually make elements appear and disappear. So one possible value for this display. What is this again? This is a... I forget from our anatomy of the declaration. <v Lee>Oh, it's a value.</v> <v Michael>It's a property?</v> So the display is property and the none is the value. Yeah. Right. Okay. <v Lee>Correct.</v> <v Michael>So let's take a look at what that does.</v> You can save it and refresh. And so display none actually just gets rid of them. It's still on the page, right, so- <v Lee>It's on the page in that</v> if you were to look at the code, the element is there, but this is actually what's really important about display is that when you set it to display none, it takes up zero width and height. So even though it's on the page, it isn't taking up space. 'Cause there actually is another way that you can hide stuff in CSS and it does end up taking up space. So it- (laughs) <v Michael>How do we view the page source here?</v> <v Lee>You can right-click or two-finger click</v> or Command + click to bring up the menu. <v Michael>And then-</v> <v Lee>Oh, we have to turn on the developer.</v> <v Michael>So in order to see that the code is still there,</v> it's not being displayed, but I just wanted to show that in fact, the social links are still on the page. I wanna look at the page source, and the best way to do that is to enable the developer tools in Safari, so- <v Lee>Right, other browsers have this on by default,</v> like in Chrome you can just bring up the little click menu and choose Inspect Element. But in Safari you have to turn it on. <v Michael>Right, so how do we do that?</v> <v Lee>It's in Preferences</v> and then Advanced. <v Michael>Advanced and then-</v> <v Lee>It's at the bottom.</v> <v Michael>Is it this?</v> <v Lee>Mm-hmm.</v> <v Michael>Develop menu.</v> And will it now give me additional choices? Yeah, here we go. So I can say show page source. So now we've got the page source, and we can scroll down, and we can see here that it's still here. The social link is still present but because of display none right here, it's not being displayed. <v Lee>Actually, before you go any farther here,</v> this would be a better way to show it. <v Michael>Okay.</v> <v Lee>So what we're turning on here is the ability</v> to see the CSS that's applied. <v Michael>Oh yeah.</v> <v Lee>So right here we have the social link,</v> which is not showing on the page. And you can tell by when you hover over this, there's no highlighting going on. And then over here you can see all the CSS that's been applied to it, and you can see it says display none. And if we toggle that... <v Michael>Ah, yeah, look at that.</v> <v Lee>It'll come back, and now-</v> <v Michael>And you see there's no highlighting?</v> I don't know what you mean. <v Lee>Right, so now when you hover over this,</v> you'll see the elements highlighted. There's that blue highlight around it. <v Michael>Right, you mean highlighted in the actual-</v> <v Lee>On the page, correct.</v> <v Michael>Page, yeah, I got it.</v> So if we re-enable display none, now there's nothing on the page. <v Lee>Right.</v> And just for funsies here, that other CSS style that I was mentioning that actually leaves the element on the page as far as the width and height, it's one that's not really used very much, but it is there. That's why we didn't mention it in the text, but visibility hidden. <v Michael>Oh, interesting.</v> <v Lee>Yeah, and so that actually hides the content,</v> but it leaves all of the sizing of the element in place. <v Michael>Ah, yeah.</v> <v Lee>So if you ever need to just not show something,</v> but need to keep the size of it there so that when you toggle it on and off, you're not moving, causing the content to bounce around, that's how you do it. <v ->Right.</v> <v Lee>But surprisingly,</v> it doesn't actually get used that much. <v Michael>All right, well,</v> so let's close the inspector down and look at another example. We're going to look at changing this social link. So right now it's... Well, we've got display none. Let's just get rid of that. Because it's a link, it's inline by default. <v Lee>Right.</v> <v Michael>So let's give it a height and see what happens.</v> You mentioned what happens if you do this if you can figure it out. So if we say height 36 pixels. Actually, let me comment this out. We'll just restore this here just to show you. So there's the link, and if I give it a height, nothing happens. And the reason for that is because height does not apply to inline elements, right, Lee? <v Lee>That's correct.</v> <v Michael>Okay, so we,</v> but we can force this to become a block element by saying display block. So in the old days I might've put the display after the height, but remember we keep these alphabetized in general. (Lee laughs) Yeah, I'm just saying. All right, so let's refresh this, and we should see the height change. There it is, and now there's- <v Lee>And what you can also see, though,</v> is the other effect that happens when you give something that was inline a block styling. <v Michael>Yeah, look at that.</v> It filled the whole thing. <v Lee>Which is block elements take up the full width</v> of whatever container that they're in unless you give it a set width. So by default they'll spread out across the entire container. And the other thing is that they also start on a new line. So what that means is it's kinda like you're giving a block element a new paragraph. <v Michael>Oh, yeah.</v> <v Lee>So if this social link was at actually</v> at the end of this paragraph of text when it was inline. And actually, we can do this. Do you wanna show this? <v Michael>Sure, let's do it.</v> <v Lee>Sure, so comment out the block real fast.</v> So let's turn it back into an inline. <v Michael>Actually, this is the next thing.</v> Let's just do this. We actually don't have an example in the text because it's pretty straightforward, but we can do this, right, display inline? <v Lee>Right, so now in the code,</v> move that first social link to the end of the paragraph. <v Michael>Okay, whoops.</v> Just move this here? <v Lee>Yeah.</v> So just to show you how- <v ->So I'm just gonna-</v> Right. <v Lee>How it takes its own line, so-</v> <v Michael>Right, so here notice that now</v> it's in a different location, so it's now green. <v Lee>Right, it's inheriting the color from bio copy.</v> <v Michael>Right, and so now-</v> <v Lee>But it's inline,</v> so it's staying with the text. <v ->Right, so now we-</v> <v ->So it's in the flow.</v> But when we make it block- <v Michael>Display block.</v> So here it is, and then aha, look at it. It's on the next line. <v Lee>See, it pops down onto its own line</v> like it's a new paragraph of text and it spreads out to fill up the entire space. <v Michael>Right.</v> Okay, so that's cool. Let's undo those things. And now we're actually going to use this sort of hybrid rule. And I don't know too much about this one. This is called inline block, right? Like this? <v Lee>Yep.</v> <v Michael>So what does this do?</v> <v Lee>We should also move the social link back to its-</v> <v Michael>Oh yeah, it's back.</v> Let me just- If I could still refresh it. Here's our original. And now let's take a look at inline block. So what is this going to do? <v Lee>So inline block is kind of a mix</v> between inline and block. It allows you to set those attributes that normally only apply to block elements. So height, width, margins, padding, all of that. <v Michael>Take a look here.</v> Ah, yeah, so here, it's got the height, but it's not filling the whole thing. <v Lee>It doesn't fill the whole thing.</v> So it stays wrapped around the content and it also doesn't break onto a new line. <v Michael>All right, so if we moved it</v> back down again like this, right? If we do this, then it'll stay the height. <v Lee>Right.</v> <v Michael>But it'll also stay in line.</v> <v Lee>Exactly.</v> <v Michael>Ah, look at that.</v> <v Lee>So yeah, it's a newer display style.</v> By newer, I mean it wasn't part of the original CSS spec. <v Michael>Right.</v> <v Lee>Yeah, it combines inline and block</v> in a way that is incredibly convenient for doing things like menus, where you might want a set of elements that are just next to each other in a row, but you wanna give them height and width and padding on both top and bottom. And actually, we'll use this later in the tutorial to do exactly that. <v Michael>Great.</v> All right, well, there's one final display setting that we mentioned in the text, which is display flex, but we're not gonna talk about that here because we've got a whole chapter on that. That's chapter seven. <v Lee>And it's a much more complicated one</v> that requires a deep dive. I mean, I think- <v ->Okay.</v> <v Lee>Michael, you were saying that that was something</v> that was totally new to you before- <v Michael>Yeah, totally new.</v> I didn't know anything about it. So, great, so this is a really good set of properties that we've got here, these different values. And I can especially see how inline block is useful, 'cause as we mentioned, we will be using this for this sort of a navigation later on because you wanna keep things inline, but you do also wanna be able to put in sort of the vertical space. <v ->Right.</v> <v Michael>The height and that sort of thing,</v> and margin and so on. <v Lee>There's one thing to think about, though,</v> which is that because it's still in the line of text, if you give something vertical styling, so height, top margin, top padding, something like that, what it's gonna end up doing is it'll still flow with the text, but it's gonna push new lines of text down. So actually- <v Michael>Oh, so affects the spacing between lines?</v> <v Lee>Yeah, it affects the line spacing.</v> So we can actually show an example of this. And we didn't do an example in the book, but Michael, if you move that social link and put it just right in the middle of the paragraph. <v Michael>Oh yeah, yeah,</v> 'cause we were putting it at the end, but if I put it- <v Lee>Yeah, we're putting it at the end</v> so there's no text after it. So you'll see when when he saves this that there's a big gap. <v ->Oh yeah, look at that.</v> Pushes it down. <v Lee>Right, so it's one of those things where</v> you do have to be aware of the fact that it can affect the rest of your content. That's still flowing in a line. <v Michael>This is getting a little ahead of ourselves.</v> We're about to talk about these attributes. But yeah, look at that. If I put a margin on it, it spreads everything out. Cool, all right, well, actually, speaking of that, let me restore it to where it was. (Lee laughs) but then we are gonna wanna talk about those other attributes of the box model that are probably some of the most common and powerful. So starting with margins and moving on to padding and borders. So, all right. We've got a good start there with these display settings.