Inline-Block

Quick reference

• 00:05 In the last video, we talked about float left and right.
• 00:08 In this video, I want to talk about inline-block.
• 00:11 So the thing about floating something left and
• 00:13 right is afterwards you have to clear it.
• 00:15 And that's no big deal, but sometimes you just don't wanna do that or
• 00:18 you can't do that.
• 00:19 In that case, you can use the inline-block property.
• 00:22 Does sort of the same thing as float but you don't have to clear it afterwards.
• 00:26 So, let's take a look at this and let's create three boxes,
• 00:32 and we'll give them a class of left.
• 00:35 Let's change our left a little bit.
• 00:36 Let's give this a border so that we can look at this better.
• 00:41 Let's go 3 pixels solid, and let's give it a color of cccccc.
• 00:45 Now, the thing about inline-block, you need to give it a height and a width.
• 00:50 So let's just give this a height of 50 pixels and
• 00:53 a width of 50 pixels and let's space these out.
• 00:59 So lets give them a margin of 10 pixels.
• 01:03 So we're gonna change this, but actually before we do this,
• 01:07 let's come back here and let's create another div and
• 01:11 let's call it, let's give it a class equals to, I don't know something doesn't really matter.
• 01:18 This is more text, So save this.
• 01:23 Now if we come back here, let's just save this and take a look at what we got.
• 01:27 So we've got our box, box box and we got... this is more text next to it
• 01:31 because we haven't cleared this so this text is still right up next to this.
• 01:35 So, if we come back here to our left and we change this from float left to, and
• 01:42 I should mention, the inline-block property is a part of the display element.
• 01:47 We talked about display in an earlier video.
• 01:50 So if we go to display and just give this an inline-block,
• 01:58 save this, come back here, hit reload, these become inline-blocks.
• 02:03 You see there're still sort of floating, this one's floating left of this one, this one is floating left of this one
• 02:09 now we have this our text that we put here in our index page.
• 02:13 We did even create a class for this and we definitely didn't clear it,
• 02:18 it just by default, gets pushed down below and doesn't do that.
• 02:22 So, sometimes, you wanna float things left and right, and
• 02:26 you'll just remember to clear them.
• 02:28 Sometimes you can't, or you won't, or you just don't want to for
• 02:32 some reason, in which case use inline-block, very easy to do.
• 02:37 One thing I should mention also, inline-block does require height and
• 02:42 width.
• 02:42 Or, I should say it doesn't require height and width, you can use height and width,
• 02:47 which is very, very useful for a lot of different things.
• 02:49 So, that's inline-block, slightly better than float left and right, and
• 02:53 you don't have to clear it afterwards.

Lesson notes are only available for subscribers.