Intro to the box model

The web — all of it — is built on the box model. Every single thing you see, all the content, the structure — it’s secretly made up of boxes. And all those rectangles? Those boxes? They’re just stacking on top of each other, or sitting next to each other based on properties we set. That is it.

The web is built upon boxes of content.

And there are three fundamentals (three important things) we need to know about the box model.

The first one we just covered: everything can be expressed in boxes. That’s one part down.

The second thing is that, by default, those boxes? Behave like a text document (things start at the top-left, and they can even wrap when they hit the edge).

Now. WHY is the web this way? There’s a reason. If you think of something in a fixed, kind of static size, like a slideshow, it might look great on a laptop. But down on a phone? Not so great.

But unlike this, content on the web can reflow and the box model lets us clearly define how these things respond (how they wrap; how they reflow) based on the space available. This is why the web — all of it — is built on the box model. Part two: things on the web (those boxes) respond just like a text document.

And the third thing? Is this. All this content? All these boxes? You can control them. They’re sized (all these boxes are sized) based on the content inside. But we can always set our own dimensions and add our own spacing. For dimensions, that’s adding properties for width, and that’s adding properties for height. For spacing, on any box, we can add space inside the box (we can add padding). And we can add margin, which is space outside the box — the space between boxes.

So what’s the point with this third bullet: our third section here? Boxes of content are in no way fixed. You have full control over all of it. Now we showed some of the basic things that make up the size and the spacing of these boxes, but that’s only the beginning.

Because once you realize all this stuff on the web is just boxes — and once you realize you can control it based on properties you can set? You can change or you can build almost anything. 

So, let’s quickly recap. The elements of the web are expressed in boxes. They flow on the page just like a text document. And we can add properties to these boxes to build out some of the most impactful designs and layouts out there.

This is just the beginning. So let’s dig deeper into the content that makes up these boxes: and we’ll do that in Intro to HTML.

[Grimur] If you’re watching this on Webflow University, thank you so much. We really, really appreciate it. But if you’re watching on YouTube, thank you for watching there too and thank you for subscribing. And actually when you subscribe, my confidence goes out of this roof. 

You know, the Twitter following just goes vroom vroom. 

Rises up. 

So good. 

So keep subscribing, keep watching and we really, really appreciate it.