Box Model Flipbook

(Okay it's just a presentation.
Press the right arrow to advance!)

As you've begun to style CSS, you've probably wanted to do things like add borders, or spacing, or drop shadows, around your paragraphs and headlines. That's done through what's called the box model.

Why is it the "box" model? Because the structure of HTML elements is a box. If you inspect an element, it's always rectangular, and often wider than the text within it. So let's start with the width of these boxes, shall we?

Width


215px

All text on a webpage is within a box. All boxes have a width.


930px

Set the width of the box differently and your text will oblige.


width: 250px;

Border

Sometimes, I'd like my text to have a big old border.

border: 100px solid #d8d4af;

Other times I want to tone it down.

border: 10px solid #d8d4af;

Most of the time I'm solid.

On occassion I want to look like a coupon.

Most of these are out of style.

But you can tell I've got options.

border:10px solid #d8d4af;

border:10px dashed #d8d4af;

border:10px groove #d8d4af;

border:10px inset #d8d4af;

But listen, the border is really cramping my style. Get a little further away from the text, would'ya?

Padding

(Scaring away borders since ... 20 years ago)

Phew. Now I've got some room to breathe.

padding: 50px;

Hi Dad.
Can you uh, not hug me every time you see me?

Oh look!
It's my daughter Sisi!

Margin

(Your line of defense when other boxes stand too close.)

Listen, you just gotta move over.

Wait a second...

(Sisi used her power "margin-left:80px"!)

Hi Sisi!

Hi Sisi!

Oh no, family reunion.

Hi Sisi!

Hi Sisi!

(What should I do?)

Hi Sisi!

Hi Sisi!

Margin power!

Hi Sisi!

Hi Sisi!

margin: 50px;

Hi Sisi!

Hi Sisi!

Margin power!

Hi Sisi!

Hi Sisi!

Except margin doesn't have color, so it looks like this.

But margins don't have color, so in reality it looks like this. Okay, so let's review.

Width, margin, border, padding

So here are all the parts of the model? (Review all)

If you need help remembering, just imagine a puffy dress -- the padding is the stuff on the inside of the dress, the border is the hemline, and the margin is the space between each person. The person, like the content, is the in the center.

So let's review the syntax of how to actually use the model.

One example of what the Box Model can do

Out in the Great Alone

Just remember, everything is a box.

The End

(Now go play Box Model Ninja)