You know how we made something that
looked like a box in the last
talk-through by making this `div` and then
giving it a `background-color`?
Well, actually, every element on your
webpage is considered a box
by the browser, whether or not it looks
like a box to you. This heading is a box..
this paragraph is a box..even this `span`
that we made is a box. Some of the boxes
are big, some are small, some are in line
like the `span`, some are block, like the
`div`. But they're all considered boxes.
Why does this matter? 'Cause there's
something called the "box model," which
you can see in the diagram I just
pasted in. Every element's box has four
parts: the actual content, the padding,
the border, and the margin. We can use CSS
to modify the padding, border, and margin.
So you'll understand soon what those
really are. Let's start with the margin.
That's the transparent area around the box
that separates the box from other
elements. We'll specify margin using our
favorite unit: pixels. To add 15 pixels
of margin on every side of the official
info box, we can just write: `margin:
15px;`. So, you see the change that made?
What if we want a different amount of
margin on each side? Like more on the
top-bottom than the left-right? We can
write those amounts in clockwise order,
starting from the top. So top 15px, right
0px, bottom 10px, left 6px. OR, we could
use specific properties for each side, but
we only wanna specify a few sides. Like if
we want to have some space around the cat
picture, on the right..and then, we also
just want some on the bottom...and we're
happy to have the default margin for the
other sides. There's also a special value
for margin that'll help us do something
fancy with our pages. To show you that,
I'm gonna add a `div` around the entire
page. I'll give it an ID of "container."
Let's put this ta-a-a-ag here, so it
contains everything. Now, gonna add a rule
for that `div` to give it a width of 400
px, and I wanna center it on the page. I
COULD specify a `margin-left: 100px;`,
because that looks centered to me, but it
may not be centered to you, because your
browser may be bigger or smaller. What we
want is to be able to say, "give it
however much margin it needs so that it's
got equal margin on both sides." That is
exactly what `margin: auto;` does. And
it's a great way to center `div`s on a
page. Now that we've centered that `div`,
we might wanna make it even more distinct
by adding a border around the edge of it
using the CSS border property. Let's add a
red border to that `div`. We type
"border:," and then we just need to
specify three aspects of the border:
thickness, style, and color. For a thin
border, I'll just type "1px," uh, for a
solid line, nothing fancy, we'll just
type "solid," and...to make it red I'll
just pop up my R G B color picker and pick
a nice...fiery red. Okay. Just like with
margin, we can specify the border for
just, like, one side. Like if we want a
REALLY thick purple border on the top,
we'll add another property. "border-top:
10px solid purple;." Cool! Now, let's add
a frame to the image. and play around with
border styles. So going up to our
"cute-cat," uh, let's see, "border: 6px,"
let's try "groove red." Okay. Now I don't
like groove, let's try "double?" Eh, let's
try "ridge." Ah-ha! Now that looks like a
frame. Now how about a border around our
official info? Uh, let's see, "border:,"
let's not make it too big, "2px," let's
try "dotted" and then, uh, let's pick an,
uh, just a subtle gray, uh, lemme try
"dashed" instead. Okay, that - that's what
I want. Now with all these borders,
something is bothering me a little.
Actually, something is bothering me a LOT.
See how the text is butting up next to the
border in the "container?" And - and
butting against the text in the official
info? That's so gross-looking, and it
makes it harder to read the text. THAT is
where padding comes in. Whenever your
elements have `background-color`s or
`border`s, you almost ALWAYS want to add
padding, to put a bit of space between the
contents and the edges. Let's add some
padding to the "container," just...let's
do 15px all around the container. Oh. So
much better. Uh, let's add...let's add
some padding to our official info, let's
see: "padding: 6px," oh, beautiful. Now,
we don't need to add padding to the image,
since images actually look good inside
frames like that. And there you have it:
the box model. Margin, border, and
padding. I used big values and bright
colors to show them off to you, but my
page DOES look a bit cheesy now. If you
want your page to look sleek and
sophisticated, try using more subtle
whites and grays. Whatever you do, make
sure you use these properties, because
they'll have a big effect on how your page
looks and feels.