Block vs Inline Elements

Quick reference

• 00:05 Okay, so we've come a pretty long way here.
• 00:07 We've learned a whole bunch of different tags.
• 00:09 There's one sort of central concept that I wanna talk about before we move on
• 00:14 to some more fun things.
• 00:16 And that's the idea of block tags verses inline tags.
• 00:20 So I have given you a bunch of different tags and
• 00:21 some of them are block some of them are inline.
• 00:24 And what's the difference?
• 00:24 Well a block is a big block, i mean it's a big chunk.
• 00:28 And let me just show you an example by, let's call up our Lorem,
• 00:33 get some Lorem Ipsum text here and let's see.
• 00:37 We just want, let's generate one paragraph.
• 00:40 So let's grab this and come back to our code here.
• 00:43 Give ourselves some line breaks.
• 00:48 So the p tag, paragraph,
• 00:49 that's a block item because we're looking at a whole big block of stuff here.
• 00:54 And if we come up here, we see this all a big block.
• 00:58 Well inline means on all on one line.
• 01:01 So an image tag is an inline tag, right?
• 01:04 A strong tag, is an inline tag.
• 01:07 For instance, so if we come up here and let's wrap this guy in a strong tag.
• 01:17 See this is, we can do this inline here and when we do that,
• 01:21 it just makes it bold.
• 01:23 But it makes it bold inside this p block, right?
• 01:27 If on the other hand, we turn this into a p tag instead of a strong tag,
• 01:32 p is not inline, p is a block.
• 01:37 So what happens?
• 01:38 Boom. It pops this down and
• 01:40 this becomes it's own block.
• 01:42 So block items, they take up all of the space available,
• 01:46 whereas inline items, they just take up the space that they are wrapped around.
• 01:50 So when this was a strong tag, it didn't take up this whole area here.
• 01:56 It just took up from here to here, right?
• 01:58 So that's the difference between block and inline.
• 02:01 And you'll get a feel for which ones are block and
• 02:03 which ones are inline, as you go along.
• 02:05 It's usually the ones you think.
• 02:07 Let's say if we wanted to, let's remove this, if we wanted to create an image.
• 02:17 And let's just come up here and grab our trustee hiking image.
• 02:23 And let's give this a height of 30.
• 02:27 They get very small but we can see it bopped it right inside this p.
• 02:33 It did not give it it's own line because an image tag is an inline tag.
• 02:38 So was able to put it inline, inside this p tag.
• 02:42 Links are also inline tags, if we created a link here.
• 02:48 Save from that and just give it a placeholder hashtag.
• 02:54 If we save this, we see this, the link is inline, right?
• 02:59 And there's actually a tag that you can inline things, and
• 03:03 it's called the span tag.
• 03:04 And span tag has an open and a closed tag.
• 03:08 So let's go, consicuture?
• 03:11 Whatever that word is.
• 03:13 We'll hit reload, there it is right there.
• 03:15 Hit reload,
• 03:16 it keeps all these inline because well the expand tag doesn't often do much.
• 03:19 Anyway, I just wanted to make you aware of the concept of block versus
• 03:24 inline because when you're creating the look and feel on the design of your site.
• 03:29 You need to know that there is concept of block versus inline, so that if you find
• 03:33 yourself in a situation where you create a tag and it gives its own line.
• 03:38 You could realize that that's a block tag and you can treat it appropriately.
• 03:43 So that's block.
• 03:44 That's inline.
• 03:45 In the next video, I wanna talk about forms.
• 03:47 And that's all for this video.

Lesson notes are only available for subscribers.