8.5 Inline block - Video Tutorials & Practice Problems

<v Teacher>All right.</v> We've seen how to line up these boxes. What was the technique we used earlier? <v Teacher>We just used the float method</v> to put things next to each other. And now we're gonna take a look at using inline block to also put elements next to each other. <v Teacher>Okay, and we're gonna focus on these links here</v> which will eventually be social links as we gave them classes in the last section, based on something we probably should have done earlier but that's fine. So these will be social links related to the the Learn Enough accounts themselves. These ones down here are attached to the individual founders. So what's our plan for rearranging these and why are they in a list right now? <v Teacher>So they're in a list because</v> it's a list of links, and we're styling it up in a way where it's not gonna look like a list at all, but if one were to remove all of the styles from the page and this was just pure, raw HTML, you would kind of want these links to be in a list. So we put them in a list. <v Teacher>Yeah, so this has become a convention</v> for things like navigation links or just like a cluster of links like this. All right. Well, so what we're gonna do is first give it a class. We're gonna go down to this UL, an ordered list, where is it, it's right here. So basically what we need to do is we need to style the the UL, the unordered list itself. So it's convenient to give it a class in this context. Okay. So it's called a social list. And then under social links here, I guess, social style. So where are we gonna put it? We'll put it underneath the the social links, so like here. <v Teacher>Exactly.</v> <v Teacher>And let's do...</v> So what do we wanna do with this thing? It looks like we're gonna try to basically take these links and put them in the middle. <v Teacher>Mhm, eventually that's what's gonna happen.</v> <v Teacher>And then we wanna get rid of these-</v> <v Teacher>Right, that's what I was gonna say.</v> First we need to get rid of the bullet points 'cause we don't want that. So we're gonna use a new style that we've never seen before called list style. And this property is pretty self-explanatory. Yeah we're gonna set it to none. <v Teacher>Right, so let's take a look at what that does.</v> I think it'll just get rid of these little bullets. There we go. Okay. And then... <v Teacher>We're gonna also set the padding to zero.</v> And the reason for this is that unordered lists, bullet lists, by default in HTML have a little bit of padding on them and we don't want that. So we are pretty much completely resetting. There we go. <v Teacher>Cool.</v> And then we also want to kind of line them up. <v Teacher>Right, so now what we're gonna do is</v> we're gonna target the li, and we're going to use a selector that is called the child selector. <v Teacher>Okay, and that's just this right angle bracket.</v> <v Teacher>Right.</v> And then we're gonna target just the li, and do display inline-block. <v Teacher>Now why do we have to do this,</v> this child selector? Oh, I see how it works, look at that. <v Teacher>So this is just being super careful.</v> <v Teacher>If we did this, it would still work right?</v> <v Teacher>Correct. That would still work.</v> But then if for some other reason we wanted to have another set of lists or another menu in there- <v Teacher>Right.</v> Where like inside one of these li's, would it be like inside here like that? <v Teacher>Mhm.</v> Right, and this is completely valid to have a list within a list. And it's actually something that we're gonna use later in the header and we're gonna use it for sub menus. So this is just good practices here and a good opportunity to introduce some of the more advanced selectors. So what this child selector does is, it says only add display inline-block to li's, list items, that are the first child. Can you go back to the CSS? <v Teacher>Yeah. Yeah I think...</v> <v Teacher>So only style things that are the first child.</v> So this one right here. <v Teacher>Yeah, so it's styling this one</v> but it's not styling the ones inside it. <v Teacher>Right, because that's down two more levels.</v> <v Teacher>Right.</v> So technically we probably don't need it here, but it's just the kind of thing that it's a good practice because otherwise it'll bite you later on. <v Teacher>Exactly.</v> It's good to be specific in this sort of case. And there's no real harm in in doing it for something like this. And we're gonna be taking a look at a lot more advanced selectors as we go through this because there are actually a bunch of them. <v Teacher>Okay. So this is great.</v> We've got them all lined up and now all we need to do is somehow put them in the center. <v Teacher>Yeah, one quick thing to note here,</v> this is a little bit weird, and it's one of the few drawbacks to this technique, but there is a little bit of space between each one of the boxes. <v Teacher>Yeah. I see that.</v> <v Teacher>If we were to float those elements,</v> they would be touching each other. There would be no space between them. And that space is there because when you make something inline block, the browser treats those elements as though they're words and words have space after them. Like when you hit a space. So there's just this tiny little bit of space between the elements, which it depends what you're trying to do. If you want things flush, then using inline block to put stuff next to each other might not be the best technique. But if it doesn't matter if they're flush. then it works perfectly fine. <v Teacher>Right.</v> And so we can get them to go to the center. This is a cool technique. This is the kind of thing that... This used to be impossible if I recall- <v Teacher>This used to be really difficult to do,</v> really, really hard and- <v Teacher>Yeah by impossible I mean, like,</v> yeah, just a real pain. <v Teacher>Yeah.</v> And because each one of these elements is being treated like text, we can use text align to align them. <v Teacher>Look at that.</v> <v Teacher>And then they're there right in the center.</v> <v Teacher>Cool.</v> <v Teacher>Yeah it used to be a real hassle</v> to do this sort of thing, because like Michael mentioned in the last section, there is no float center. <v Teacher>Right.</v> All right, well this is great. We'll have a chance to style this a little bit more later in this chapter and then we'll really take care of it and polish it up, make it really pretty throughout the rest of the tutorial.