Display

Quick reference

• 00:05 Okay, in this video, I wanna talk about the display property.
• 00:08 So, in HTML, an element can either be a block or inline.
• 00:13 And what's the difference?
• 00:14 Well, a block takes up all of the space available.
• 00:18 And inline just takes up the amount that it's wrapped around.
• 00:22 So, here's an example, let's create, actually,
• 00:25 I'm gonna go grab some lorem ipsum text.
• 00:29 And if you don't know lorem ipsum text, it's just gibberish text.
• 00:32 I want one paragraph, let's generate it.
• 00:34 So, here's our paragraph.
• 00:35 And if we come back to our index page, and let's wrap this in a paragraph tag.
• 00:44 So, we save this and hit reload, we get this whole big block of text, right?
• 00:49 So this is block.
• 00:51 If we created, let's say, right here, the second word,
• 00:56 if we created another p tag and wrapped it around that, what would happen?
• 01:02 Well, it would take that second word and bop it down into its own block,
• 01:07 because a block takes up all of the space available, right?
• 01:11 So the difference between block and inline, so let's take the same thing and
• 01:16 let's give it a strong tag.
• 01:17 That's supposed to make it bold, right?
• 01:20 So if we add that strong tag, strong is inline, so
• 01:24 what it does here is it does it inline, it doesn't give this its own block of text.
• 01:30 It just does it inline, so that's the difference, block versus inline.
• 01:33 But with CSS, we can change that with the display property, and
• 01:37 that's very powerful.
• 01:38 So if we come back here, and for instance, lets do our strong property here.
• 01:44 And so the display tag is just display,
• 01:48 just like that, and the options are block or inline.
• 01:54 So, strong is usually inline, so let's change it to block.
• 01:57 So, what do you think is gonna happen here?
• 01:59 When we added the p here earlier, it gave that ipsum word its own block.
• 02:05 Now, we've got this wrapped in a strong, and
• 02:07 we've just told through CSS to change strong from inline to block, so
• 02:12 if I hit reload, boom, it should do the same thing that the p did earlier.
• 02:16 It gives its own line, it puts it on its own block,
• 02:19 it takes up all of the available space,
• 02:21 from left side of the screen all the way to the right side of the screen, okay?
• 02:25 So that is really cool.
• 02:26 And now we can do the same thing, we come up to our p,
• 02:31 we can change this from display block to display inline.
• 02:36 And if we do that, and then come back to our index page and change this to p.
• 02:41 When we did this last time, it gave that ipsum letter or
• 02:45 ipsum word its own block line.
• 02:48 Now if we do it, it doesn't do anything at all because it's still inline.
• 02:51 So, changing things over from block to inline,
• 02:54 it may seem like a simple thing, I have to delete all of this stuff.
• 02:59 It may seem like a simple thing but it's very powerful and it's very important.
• 03:04 And you'll see the more you go along and do more complicated things, you're gonna
• 03:07 wanna change that display property from time to time, and it's very handy.
• 03:11 So, that's all for this video.

Lesson notes are only available for subscribers.