CSS box model

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.