CSS Box Model

[00:00:00]
>> Layout, everything to this point we've been doing is making this change colors, maybe making it change widths, those kinds of things. I wanna show you how to move things around, right? So notice, this is centered on the page, for example, right? How do I do stuff like that?

[00:00:19]
So my CSS didn't like this apparently, which is fine. But I had Box 1 and Box 2 and they're next to each other. So how did I do that? All right, cuz these are just divs. If you would expect, I don't know why that's there, it doesn't need to be.

[00:00:44]
If I do float left here, if I get rid of that, notice that they just go there, and that's totally fine, right? So these divs by default will take the entire line onto themselves. And if I want them to float next to each other, and you can do this float: left, and this will move them next to each other.

[00:01:06]
Now, there's something pushing this down and I'm not really sure what it is. Is it the style tag? No, it shouldn't be. But, I mean, this is always something with CSS. What's the mystery thing breaking it this time? But in any case, typically those would be just right next to each other.

[00:01:30]
I wonder if this looks different in Chrome. Nope, same, interesting. But that's float left. You can also do float right, and this will float on the other way, right? Notice that this one comes first, right? Because that will float right first and the next one will float next to it.

[00:02:00]
We'll get into flex here in just a little bit, but this is saying Box 1 and Box 2. Notice that they're centered, that's what the flex is doing. And yeah, nice border background. And then we'll talk about margins, right? So notice that there's a space between them. That's what margin does.

[00:02:20]
So if I get rid of this, notice that they're just smooshed up against each other, so that margin allows them to be spaced away from each other. And then you got nice rounded corners there, that's coming from the border radius. And then line items, these three lines make it so that these things are centered.

[00:02:42]
So float, you used to have to do everything with float and it was such a pain, as you can see here, I am already having an issue with it. You don't have to do float anymore, there's so many more useful ways of doing things like this, like flex, we'll have a whole chapter on flex when we get there.

[00:03:03]
So, along those lines, let's talk about the box model. It's one of the most confusing things about people that people have a hard time grasping in CSS. So I just wanted to spend a whole bunch of time talking about it. So everything in CSS has a display property, whether it's set or not.

[00:03:24]
So every div, for example, by default is display block. It's just by default that way. Everything that's a span, for example, is display inline, which means treat it text. So if you try and set width on something that has display inline, it just ignores it because text doesn't have width per se, right?

[00:03:46]
It's just flows in how text flows. So I don't know, inspect this here, this is a little bit of, it's a code thing, which is a span. If I try and say on this, width: 1,000 pixels, Actually, that's really nice. Firefox says, hey, this actually has no effect on this because you're on display inline.

[00:04:13]
These dev tools are great. I didn't know I would do that. However, if I say display: block, now, because it's in block mode, it's actually gonna respect that width because it's actually gonna, and notice it took the whole line now, right? Or if I go back to inline, like it was before, implicitly, Notice that it doesn't have its own line.

[00:04:38]
So blocks by default will take their entire line onto themselves. You can make their height and width change. Whereas display inline will just make it flow like text and has no height or width, it just flows. Now, those are just two, right? We saw display flex. There's also a hybrid here called display: inline-block, which is like, I want you to flow into the text but I also want you to respect my width and height.

[00:05:09]
So just to hammer home, border: 1px solid black. Let's make not 1,000 pixels, but let's make it 50 pixels. So you can see there, it's actually gonna respect my width there. That's what the inline block does, it's like, all right, still flowing with the text, but I want you to respect whatever height and width I'm setting.

[00:05:36]
So a good example of when you might want that is an image where the text wraps around it, right? You're like, I want this to flow into the text and be with the text, but I also want you to respect what my width and height would look like.

[00:05:51]
Okay, so that's display. There's inline, there's block. There's inline block. There's flex, which works a lot like block, but allows you to do some flex properties. We'll talk about that. It also has an inline flex, which is the same thing of, treat it like block, flow with everything, but also have my interior width as flex.

[00:06:13]
There's another section on grid and inline grid, same sort of thing. And there's also display table, which is act like a table. You almost never wanna do display table, just use table if you need a table. If you're doing something with display table, ask yourself some questions cuz you're probably doing something funky and you could do it better.

[00:06:39]
That might be it. I think that's it. Okay, So height, width, padding, border and margin. People often get pretty confused about what's the difference between all of these. So I have this little example here. This is a block, right? I have the interior content, and everything around that, you can think of being what the actual height and width of everything is, right,, Of just the interior content.

[00:07:15]
Everything inside of the red would include the content plus the padding. So that's the size of the actual element itself, okay? And then everything in the blue here, you can think they're margins. So that's how far away is this from everything else? So it pushes things away from it, whereas padding pushes the interior things inside of it.

[00:07:36]
So if I had this here, the example, the border here, 3 pixels red, that's where the border will be. I have an interior padding of 5 pixels, which is pushing it in that little dotted line a little bit, right? And I have a margin of 25, which is the blue part, which is pushing everything away from it.

[00:07:58]
So everything that's white is inside of the element, everything that's blue is outside of the element. That makes sense? So anyway, think of padding as the interior spacing, so you wanna push your things inside it, so you have more space inside of your element, and margin pushes everything else away.

[00:08:22]
Sometimes it doesn't make a difference, right? So for example, this space between these two text blocks, does it matter if I use padding or margin to do that? No, it really doesn't matter which one it does. But sometimes if you have backgrounds, so for example, if I, this has to be margin between these two boxes here, because otherwise it'll just make the box wider instead of pushing away and having a whitespace between them.

[00:08:49]
That's why padding ends up being really important. It'll make more sense as you go along with things. So margin space outside. So if you give something a background color, for example, the margin doesn't get the background color, right, cuz it's outside of the element. The border is the border, right, the border is that.

[00:09:15]
And then padding, if you give it a background color, it will get that color cuz it's inside of the element. Okay, So this doesn't have a set width, right? So it'll actually just take up 100% of the width that it can by default. If I give it a width, you can do it if you want to.

[00:09:45]
And I say width: 50px, let's do 500 pixels, maybe. Then it'll actually adhere to whatever I'm doing. And I can do that in pixels, I can do that in percentages. And then if it's a percentage, it'll change with how wide the content is, right? So that can be useful as well.

[00:10:14]
All those kinda things. Height, same thing. You can't do height in percentage, which people find kinda strange. Height can only be in pixels. The only thing that you can, well, there's some other tips and tricks to kind of do it, but it's kind of advanced CSS use cases.

[00:10:36]
For now, you kinda just have to set it absolute to say like, this is gonna be 100 pixels height. One thing I'm going to advise you of right now, just put this one line in every CSS project. This star right here is called the wildcard. I want you to never use it besides for this purpose, which means select literally everything.

[00:11:05]
Select everything and make it box-sizing: border-box. It just makes measuring everything simple. There's a whole article on, yeah, I linked to it right here from a really cool guy named Paul Irish that said, this is fine, you can go ahead and do it this way. What it does is if I say width 100 pixels of this red box, do you expect it to include the border or not?

[00:11:31]
So if I have a 3 pixel border, if I say a width 100 pixels, should the width actually be 100 pixels or should it be 106 pixels, cuz you have a border on either side? Me, I want it to be 100 pixels and I want it to include the border, because it makes everything way easier to measure, right?

[00:11:50]
And I don't have to go do math every single time, okay, what's the border plus the content area? I don't have to worry about any of that. If you do border box, that's what that does. It includes everything including the border in your widths. If you don't do it that way, then by default, everything is content box, I think, is the name of that property.

[00:12:13]
It doesn't matter, you'll have to account for the border every single time. I'm intentionally not covering floats a lot because, You never have to use floats anymore. You used to have to use them literally all the time, but now with flex and grid, you can pretty much always get away with not using floats anymore.

[00:12:36]
And they're a pain, they're so painful. And before floats, we had to use tables for everything. It was a dark time. Yeah, you don't wanna go back to those days. Okay, So we're gonna talk about float and flex for just a second. So I got these three boxes here that I intentionally made different sizes to kinda demonstrate to you what's different about them.

[00:13:12]
They have to use same CSS, and I'll be using the same CSS for all these the entire time. By default, if you don't do anything with no floats, no flex, nothing else, this is what they look like, right? They're spaced out, they by default have a little bit of margin underneath them.

[00:13:32]
And yeah, they get laid out by default just like that, just one each after the other, they all wanna take the entire line unto themselves, right? If I float left, this is what ends up happening. And again, I have something here that's pushing them down, which is really interesting.

[00:13:50]
Typically, it wouldn't happen, they would just be all top aligned with each other. But they'll all try and fit onto a line. And then if I, Start making the browser expand, I know, it will not be able to fit, it starts pushing them onto the next line. So it tries to fit everything, and then once it runs out of space, it'll push it down to the next line, Which is kinda fun, right?

[00:14:20]
Here, now if I try and say float: right, same thing, goes the other way. And I think you can float: center. No, maybe not. Middle? No, you don't, you can actually do it that way. So yeah, you just have to float left or min. As you can see, it's limited in its usefulness and it ends up being really hard to get things exactly where you are.

[00:14:51]
And obviously, it's been long since I've had to do floats that I don't remember exactly all the nuances, cuz there's a ton of nuance in how things will float. So I want you to know that they are out there. I show you that because if you start working at a company that's 20 years old, you're probably gonna see floated code in there.

[00:15:09]
These days, you don't have to use it, you can use modem flex. And now, we can even use grid, which is a relative newcomer. The problem when they release new CSS, we have to wait five or six years before everyone's browser catches up, because there's lots of people out there that don't update their browser very much.

[00:15:28]
And so if you try and ship code to them that uses modern CSS and the browser doesn't understand it, you have a problem, right? Because the browser won't recognize it and therefore won't apply it.