Box Model

Quick reference

• 00:05 Okay, so we have talked about several different things margins, border, padding,
• 00:08 and then content and I wanted to show you something that sort of visualizes how they
• 00:13 all come together how they all work together and this is called the box model,
• 00:17 see it says box model and basically all HTML elements are boxes.
• 00:22 You can think of most of the things you're gonna wanna do as a box,
• 00:25 and they'll all have margins, borders, padding, and then the content.
• 00:29 In the last video we talked about height and width,
• 00:32 well that's where this content area is.
• 00:34 So if you wanted to designate height and width you would be addressing this white.
• 00:38 Box right here, right.
• 00:40 So we've already talked about border.
• 00:41 That's this thing right here.
• 00:43 In the past videos we had a purple dashed border.
• 00:46 Inside your border is padding, right.
• 00:50 Inside the padding is the content.
• 00:52 And then outside of everything is this margin.
• 00:56 Now margin is transparent usually, right.
• 00:59 And so is padding.
• 01:00 So I've got a designated gray here just so we can sort of visualize it and
• 01:05 look at it and see.
• 01:06 But for the most part, this is gonna be transparent.
• 01:08 Your border could be transparent.
• 01:10 You could have no border and designated it as 50 pixels, but
• 01:14 just not have it dashed or solid or anything, it could just be transparent.
• 01:18 So you could do that, but for the most part, your border's going to be
• 01:21 some visual thing, one pixel, ten pixels, dotted, dashed, grooved, whatever.
• 01:26 We talked about all those different things in earlier videos, and
• 01:29 likewise padding is going to be transparent too.
• 01:31 It is important to visualize this whole thing because,
• 01:34 I mentioned it in the last video.
• 01:35 If you designate something with a certain height and
• 01:38 width that isn't going to take into consideration everything.
• 01:42 So if you have two boxes sitting next to each other and one is 50% and
• 01:45 another is 50%, or one is 50 pixels and the other is 50 pixels, but they each
• 01:50 have different padding and different margins and even different border sizes,
• 01:55 then that could look very different than what you want it to look.
• 02:00 So every time you're creating any sort of content with CSS and
• 02:04 you need to know the specific size of it.
• 02:07 You have to take into consideration both the margin, the border, and
• 02:11 the content height and width.
• 02:12 So that's the box model.
• 02:13 As we go on and
• 02:15 build more things this will become more apparent to you as you create
• 02:19 different divs that are next to each other and you're trying to size them correctly.
• 02:22 And even when we're doing mobile content where the screen size can change and
• 02:27 the elements get resized automatically, you still have to be thinking sort of all
• 02:31 the time in the back of your head how does the margins and the borders and
• 02:35 the padding and the height and width of the content all interact with each other.
• 02:39 So the box model is just a way to visualize that.
• 02:41 Obviously your margin won't have this dot around it and
• 02:44 your content won't necessarily have these dots around it.
• 02:46 That's just my way of sort of breaking the different elements apart so
• 02:50 we can visualize them and get an understanding of them.
• 02:52 But, yeah, pretty simple concept.
• 02:54 The CSS box model and that's all for this video.

Lesson notes are only available for subscribers.