Introduction to Web Development CSS Boxes
This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "CSS Boxes" Lesson
>> Brian Holt: We're gonna get into something a little complicated right now. It's called the box model. That's kind of like how CSS is based on. It's like boxes that kind of flow next to each other. Also called like document flow or something like that. So there are a lot of CSS properties that specifically affect boxes.
[00:00:28] The most obvious of that is going to be width and height, right. So if I tell something you're only 300 pixels wide, it's gonna make itself 300 pixels. And if I have text in there, the text is going to flow inside of it, right, it's gonna flow to that constraint, like you're text is not gonna try and extend outside of it, it's gonna stay within its parent's constraints.
>> Brian Holt: It's kinda weird to explain, but I think it kinda makes sense once you start actually doing it. So border's one of those, you're telling it to put a border please around my box. So all those are valid borders, one pixel solid black, three pixels dashed gray, five pixels dotted, and then like a hex number, right.
>> Speaker 2: Does the border go on the outside of the box? Or does it flow into the box?
>> Brian Holt: So that's a really interesting question. Let me see if my next slide is that. Yeah, we'll talk about that in just one second. That hex right there's purple, in case you're wondering.
[00:01:25] Background color, you're saying, I have this box, I want the inside of my box to be this particular color. Background image. So say, I like to make an annoying tiled background or something like that, then you can use background image for that. So, let's talk about widths, heights, borders everything like that.
[00:01:50] It's complicated right, so just so you know, if this doesn't initially make sense work on it.
>> Speaker 3: Will border box be covered?
>> Brian Holt: I'll mention it right now. Yeah we'll talk a little bit about it. Sure. Let's talk. So this is the box model. So first thing you have is height and width in the interior there, right?
[00:02:20] Don't worry about background color. The background color will just only cover what's inside of there, right? So height and width. That's just saying, here's my container and it is like this big, right? Then outside of your width and height, and right now we're talking about content box versus border box, so I'll address border box in just a second.
[00:02:45] But if you don't tell CSS to do anything differently it assumes what you want is content box, which is this model that I'm showing you right here, okay. So, you have height and width and then on top of the height and width, so say I have 100 pixels and 100 pixels and that's my square, right.
[00:03:05] Then I say I have ten more pixels of padding on every side, it will go outside of that and it'll be, you have your 100 and now you have 120 by 120, right, cuz you have ten pixels on either side
>> Brian Holt: So that's the padding, that padding is what's immediately around it.
[00:03:24] And then outside of your padding is where your border goes, okay. So say like I have like border three pixel solid black, okay. So then I have like a border left, a border top, a border right and a border bottom of three pixels. So now I have 126 by 126 pixels right.
[00:03:41] If it seems weird it is, okay? And then outside of the border then you can tell like I want you to be this far away from anything else right. So, I want you to be ten pixels away from like my nearest container. So you say I want 10 pixels on every side.
[00:04:04] So then it pushes all the content away from a ten pixels on any side. That kind of make sense? Okay. The model that I just described to you is known as content box and it's a huge pain in the ass, giant pain in the ass. Recently they came up with something called border box that makes a little bit more sense.
[00:04:27] And the biggest difference is, if I say my content is a 100 pixels wide and 100 pixels tall, that includes both border and padding. So using this, in fact I'll go to my mouse. So using this particular, if we say make this border box, width is now up here and height is now down here and it includes.
[00:04:57] So if I say, I have a 100 pixels by a 100 pixels, and I have ten pixels of padding, the ten pixels in padding go inside of it. And now actually your content only has 80 pixels to fit in, right? As opposed to going on the outside. And you have a 100 pixels to fit your content in, but your box is actually 120 pixels wide.
[00:05:19] Why is this easier? Because if you're trying to do relative widths, because you can do like, I want you to take up 80% of your width. Having the padding outside of that 80% made it just a giant pain in the ass right. You had to like, if I wanted to make my, like I had two containers one was 80% and one was 20%, I had to account for padding and border on top of that.
[00:05:45] So, I had to be 78.3% wide plus my padding, right. It just made it like the math just horrendous. So, you can say things like I want you to measure in terms of border box. And then you just say 80%, 20% it just fits. That's the big difference.
[00:06:03] It's extremely useful. I recommend just putting everything in a border box. Particularly, if you wanna do responsive. This bit is huge if you are trying to do responsive web design.
>> Speaker 3: I think you mentioned document flow earlier. Can you just explain that?
>> Brian Holt: Yeah. We're gonna talk about that when we go to flows.
>> Speaker 3: Okay.
>> Brian Holt: Yeah, so it's coming up super soon.
>> Brian Holt: Cool any questions about border box, content box, widths, heights, borders? This is kinda like, it's like clear as mud, probably, right. It's kind of convoluted to speak on a theoretical level. It kind of just makes sense as you keep going with it.
[00:06:45] And if you mix up padding and margin, don't worry. Everyone does. It's cool.
>> Brian Holt: Okay, further questions?
>> Speaker 4: I have a question about bordering. So when you put the CSS probably in values, does it matter the order that you place them? Say, you put background on top or, and while you keep on adding it, it gets pushed down to the bottom.
[00:07:13] Is there a specific order that you have to maintain while?
>> Brian Holt: No.
>> Speaker 4: The rendering doesn't make a difference?
>> Brian Holt: Makes no difference. The only difference is I repeat the value, right? If I say padding ten pixels, and then I say padding 30 pixels right after it. The 30 pixel one will be honored because it's the last one in there.
[00:07:32] Other than that, like, if I wanna have like font color and font weight in there, it makes no difference if I put color first or if I put color second.