(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?
All text on a webpage is within a box. All boxes have a width.
Set the width of the box differently and your text will oblige.
border: 100px solid #d8d4af;
border: 10px solid #d8d4af;
(Scaring away borders since ... 20 years ago)
(Your line of defense when other boxes stand too close.)
(Sisi used her power "margin-left:80px"!)
(What should I do?)
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.
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.
(Now go play Box Model Ninja)