Content Box

[00:00:00]
>> Kevin Powell: Now we've done a lot of styling so far. We've been looking at lots of properties and values, and one thing that we haven't talked about yet though is actually making some sort of layout happen. And obviously a big part of CSS these days is creating layouts. We're going to be diving into that world for the next few parts of this course, and the first thing we need to understand when we're creating layouts is the box model.

[00:00:22]
At its core, the box model is very straightforward and it's all about the way elements are made. This is a screenshot from the dev tools where we can see the different pieces of the box model. All the way in the middle, we have the content-box, then we can see the names of the padding box, the border-box, the margin box. The way that everything is calculated, so let's dive in and actually take a look at how they work.

[00:00:46]
Before we even worry about those properties and what a content-box is and everything, this paragraph that I have here, let's make the font-size bigger so we can actually see it a bit better. Font-size, 2rem. We have a paragraph there. I've just put a background on it so we can see it. There's no other reason I've put that there and we're seeing the content-box. Block level elements by default have a width that's going to be as large as it possibly can get and a height that's going to be as short as it can possibly get.

[00:01:18]
This is the height auto, width auto. They work opposite one another, but this is a really good intuitive behavior. If we take this and I make this smaller or bigger, we can see that it's just working as the, it's trying to be as wide as possible, but as the space is getting smaller going this way, the text wraps down and it has to get taller, so the content is forcing it to get bigger. It's a very intuitive behavior, so people don't think about this very much, but it's one of those things that we should take advantage of as much as we can and just let elements do what they do.

[00:01:52]
I'm going to be repeating this as we're going through some of the layout stuff, but always keep this in mind because it's something people don't pay enough attention to, that the default behavior before we write any code whatsoever is really, really good. It's actually responsive. So when you run into overflow issues, you know, you're the one who's actually caused that problem because it was working before.

[00:02:11]
Now there are ways of doing that, which is I said the width and the height. So traditionally we had width, let's just say 500 pixels, and now no matter what I do, it's 500 pixels. Pretty straightforward. That also means it will cause overflow. So I said I can cause overflow problems from happening or I can cause them to happen by putting explicit widths. Earlier when we were talking about text alignment, I was talking about logical properties.

[00:02:41]
We now have these also for all the sizing things. Anything related to the box model has a logical property. So instead of width, we have an inline size. Inline axis, so it's our inline size, 500 pixels, exactly the same. I try these days to use logical properties in everything I'm doing, so I'm going to be using them here, but I'll make sure as we're going through to mention the physical side equivalents for all of them as well.

[00:03:09]
So that's the inline size is fixing the size that way. Then we have a height of, we'll say 500 for now, so we get a square. Now I've locked the height in, no matter what I do, it will be 500 pixels. The logical equivalent is the block size. So inline size is the way the text runs, block size is the height of boxes, like up and down is always the block axis. Inline axis, block axis, good things to remember when you're doing or using logical properties.

[00:03:40]
Takes a little bit of use to get using them, width and height are so easy, but again, I try to use them as much as possible. Again though, the problem that happens, let's turn off this inline size and say I only set a block size. This happens a lot, you have like a big area at the top of your website that you need a nice big background on, so you come in and you give it a big background size. I'm going to reduce this a bit because I don't have enough text.

[00:04:04]
But the problem with putting in heights is as this gets smaller, well, it's not doing that thing it did before where it automatically adapted to the content that was inside of it. Now I have content coming out the bottom. This is called overflow. Before I had overflow on the body, the body was scrolling horizontally. Here the text is overflowing out the bottom. Complaint that people always have with CSS.

[00:04:25]
The CSS's awesome meme is sort of based on this behavior where the word awesome is coming out of a container. This is all done on purpose. If you did this in some design software, it would clip the text. CSS was made lossless as a default. So if your content doesn't fit in the box, the content will just spill out of the box, and you have to decide what you want to do about that. But the only reason it's spilling out the box is because I'm making it spill out the box because I made my box too small.

[00:04:52]
So in general, for layouts, it's different if you're doing like an icon, an avatar, things that are going to have smaller sizes, you can get away with this. But for layouts, very rarely do you want to be setting specific sizes on the content-box of an element. Instead, I always say that you should be setting constraints. And what I mean by constraints is, let's go back to the default behavior. With the default, it just works.

[00:05:20]
But the problem probably is, I don't want a width of 500, I don't want it to get bigger than 500, because it starts stretching, the line length gets super long on big screens, it doesn't look very good. But if I get smaller, I definitely want that to adapt so it doesn't break on small devices, or if somebody has a small browser screen on their computer. So instead of saying that the inline size is 500 pixels and breaking things, you can see here I'm overflowing out the side, I want to come and say that the max inline size is 500, and I'm setting a constraint that's working with how the browser wants to work.

[00:05:56]
The browser wants to be as big as possible, and I say keep doing that, except don't get bigger than this. So we set the constraint there. Now it will still shrink, but when I get bigger, at one point it locks in and it will not get any bigger than that. Perfect. Just in case you prefer, there is a max width as well, using the non-logical version. We can do the same thing for your heights. We talked about wanting to have a big hero area or a big thing at the top of your page where there's all this space that's there with a big image or something.

[00:06:32]
So you might come in with a block size, we said before, so block size, we'll use the 300 pixels again because that caused overflow. And I don't want to do that because again at the small screens, we have overflow. I have to think, what's the default behavior of the browser. It already wants to be as small as possible. It's shrinking, it's going there, it's based completely on the content that's deciding the height.

[00:06:56]
So if it wants to be as small as possible, and I'm saying go as small as possible but don't go smaller than this, instead of setting a maximum over here I'm going to set a minimum. Now I'm saying never get smaller than this, but you're actually allowed to get bigger. So now as this is shrinking down, at one point it will grow because it will not let the content overflow. And really this is like the biggest thing I would say that a lot of people don't come in with this mindset of trying to work with what the browser's doing.

[00:07:26]
They're trying to set very explicit things, trying to be very prescriptive of what they're doing, and that's where all the problems come from with layouts. The more we can allow the browser to do what it wants and just set constraints on what it's doing, the easier your life will be. There is a min inline size and there is a max block size, and also I said I'll mention it, so there is a min height.

[00:07:52]
If you want to use the height instead, and there is the max height as well. Those tend to cause the same problems we were running into before, because then content can overflow in one direction or the other. So whenever I'm setting sizes for layout purposes, I'm usually doing a max inline size, like 99% of the time, and a min block size. So layout purposes probably don't want anything else. And I will even say the min block size, very rare that I bother with that.