The CSS box model

© 2013

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.

What the Box Model can do

Out in the Great Alone

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!

margin: 50px;

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.

Let's look at some syntax

  • margin-top: 20px;
  • margin-right: 20px;
  • padding-right: 20px;
  • border-right: 1px dotted black;
  • margin: 20px 30px 40p 50px;
  • margin: top right bottom left (TRBL)

(Walk through bullet points. Ask students if they can predict what would happen.)

Any questions on the box model?

So I want to cover one topic related to the box model.

Organizing your elements

 

As Not Seen on TV

By PETE WELLS

GUY FIERI, have you eaten at your new restaurant in Times Square? Have you pulled up one of the 500 seats at Guy’s American Kitchen & Bar and ordered a meal? Did you eat the food? Did it live up to your expectations?

On the web, we often have a collection of paragraphs or images that we want to bundle together. Like an article, or a headline and a photo. We often want one border to go around them, or to have some margin around an entire set of items -- we want them to feel connected and cohesive.

In terms of HTML, we need to put them into a single box. How do we do that? We can't use a paragraph -- they can't contain multiple paragraphs.

So we use what's called a div, or divider, like a bookshelf, to hold lots of little things in place.

<div>
   <h3>As Not Seen on TV</h3>
   <img src="http://i.imgur.com/EOUpanD.jpg">
   <p>GUY FIERI, have you eaten at your new restaurant in Times Square? Have you pulled up one of the 500 seats at Guy’s American Kitchen & Bar and ordered a meal? Did you eat the food? </p>
</div>

As Not Seen on TV

GUY FIERI, have you eaten at your new restaurant in Times Square? Have you pulled up one of the 500 seats at Guy’s American Kitchen & Bar and ordered a meal? Did you eat the food?

So, we can put all of that content into a single div. Now we can style the div as one unit -- we can add a margin, border, padding, whatever.

It's like how by moving a bookshelf, we can move everything in it without dealing with each piece.

Note how we're writing the code too: everything in the div is indented, and the opening and closing div tags line up. Programmers keep their code structured because it helps them see the structure of the page -- you can imagine the boxes.

styles.css

.article { 
   width: 400px; 
   padding: 20px;
   border: 3px solid #ccc;
}

index.html

<div class="article">
   <h3>As Not Seen on TV</h3>
   <img src="http://i.imgur.com/EOUpanD.jpg">
   <p>GUY FIERI, have you eaten at your new restaurant in Times Square? ...  </p>
</div>

As Not Seen on TV

GUY FIERI, have you eaten at your new restaurant in Times Square? Have you pulled up one of the 500 seats at Guy’s American Kitchen & Bar and ordered a meal? Did you eat the food?

So, we can put all of that content into a single div. Now we can style the div as one unit -- we can add a margin, border, padding, whatever.

It's like how by moving a bookshelf, we can move everything in it without dealing with each piece.

Note how we're writing the code too: everything in the div is indented, and the opening and closing div tags line up. Programmers keep their code structured because it helps them see the structure of the page -- you can imagine the boxes.

With your mentor