0:00:00.000,0:00:02.497
You know how we made something that

0:00:02.538,0:00:04.578
looked like a box in the last

0:00:04.591,0:00:06.832
talk-through by making this `div` and then

0:00:06.909,0:00:08.352
giving it a `background-color`?

0:00:08.352,0:00:10.855
Well, actually, every element on your

0:00:10.865,0:00:12.728
webpage is considered a box

0:00:12.728,0:00:15.148
by the browser, whether or not it looks

0:00:15.149,0:00:18.348
like a box to you. This heading is a box..

0:00:18.348,0:00:22.128
this paragraph is a box..even this `span`

0:00:22.128,0:00:25.178
that we made is a box. Some of the boxes

0:00:25.178,0:00:29.688
are big, some are small, some are in line

0:00:29.688,0:00:32.838
like the `span`, some are block, like the

0:00:32.838,0:00:35.708
`div`. But they're all considered boxes.

0:00:35.708,0:00:38.764
Why does this matter? 'Cause there's

0:00:38.764,0:00:41.054
something called the "box model," which

0:00:41.080,0:00:44.100
you can see in the diagram I just

0:00:44.100,0:00:46.030
pasted in. Every element's box has four

0:00:46.033,0:00:48.513
parts: the actual content, the padding,

0:00:48.517,0:00:52.357
the border, and the margin. We can use CSS

0:00:52.357,0:00:54.437
to modify the padding, border, and margin.

0:00:54.437,0:00:56.507
So you'll understand soon what those

0:00:56.507,0:00:59.177
really are. Let's start with the margin.

0:00:59.177,0:01:01.657
That's the transparent area around the box

0:01:01.672,0:01:03.822
that separates the box from other

0:01:03.822,0:01:06.742
elements. We'll specify margin using our

0:01:06.749,0:01:10.169
favorite unit: pixels. To add 15 pixels

0:01:10.169,0:01:12.799
of margin on every side of the official

0:01:12.799,0:01:16.799
info box, we can just write: `margin:

0:01:16.854,0:01:22.284
15px;`. So, you see the change that made?

0:01:22.307,0:01:25.027
What if we want a different amount of

0:01:25.027,0:01:27.237
margin on each side? Like more on the

0:01:27.237,0:01:29.647
top-bottom than the left-right? We can

0:01:29.647,0:01:31.567
write those amounts in clockwise order,

0:01:31.643,0:01:36.603
starting from the top. So top 15px, right

0:01:36.603,0:01:43.983
0px, bottom 10px, left 6px. OR, we could

0:01:43.983,0:01:46.363
use specific properties for each side, but

0:01:46.363,0:01:48.813
we only wanna specify a few sides. Like if

0:01:48.813,0:01:51.063
we want to have some space around the cat

0:01:51.080,0:01:56.750
picture, on the right..and then, we also

0:01:56.762,0:02:01.302
just want some on the bottom...and we're

0:02:01.302,0:02:03.792
happy to have the default margin for the

0:02:03.792,0:02:06.742
other sides. There's also a special value

0:02:06.742,0:02:08.642
for margin that'll help us do something

0:02:08.644,0:02:11.004
fancy with our pages. To show you that,

0:02:11.004,0:02:14.234
I'm gonna add a `div` around the entire

0:02:14.234,0:02:17.464
page. I'll give it an ID of "container."

0:02:17.464,0:02:21.394
Let's put this ta-a-a-ag here, so it

0:02:21.394,0:02:25.954
contains everything. Now, gonna add a rule

0:02:25.954,0:02:29.374
for that `div` to give it a width of 400

0:02:29.374,0:02:33.814
px, and I wanna center it on the page. I

0:02:33.814,0:02:37.744
COULD specify a `margin-left: 100px;`,

0:02:37.744,0:02:40.754
because that looks centered to me, but it

0:02:40.754,0:02:42.584
may not be centered to you, because your

0:02:42.594,0:02:45.074
browser may be bigger or smaller. What we

0:02:45.079,0:02:46.779
want is to be able to say, "give it

0:02:46.861,0:02:49.281
however much margin it needs so that it's

0:02:49.281,0:02:52.821
got equal margin on both sides." That is

0:02:52.821,0:02:56.341
exactly what `margin: auto;` does. And

0:02:56.341,0:02:57.841
it's a great way to center `div`s on a

0:02:57.841,0:03:01.471
page. Now that we've centered that `div`,

0:03:01.472,0:03:04.012
we might wanna make it even more distinct

0:03:04.024,0:03:06.304
by adding a border around the edge of it

0:03:06.333,0:03:10.333
using the CSS border property. Let's add a

0:03:10.363,0:03:13.483
red border to that `div`. We type

0:03:13.483,0:03:15.283
"border:," and then we just need to

0:03:15.283,0:03:16.943
specify three aspects of the border:

0:03:16.943,0:03:19.783
thickness, style, and color. For a thin

0:03:19.783,0:03:23.473
border, I'll just type "1px," uh, for a

0:03:23.473,0:03:25.633
solid line, nothing fancy, we'll just

0:03:25.639,0:03:28.969
type "solid," and...to make it red I'll

0:03:28.969,0:03:31.649
just pop up my R G B color picker and pick

0:03:31.649,0:03:37.769
a nice...fiery red. Okay. Just like with

0:03:37.769,0:03:39.919
margin, we can specify the border for

0:03:39.919,0:03:42.789
just, like, one side. Like if we want a

0:03:42.798,0:03:46.078
REALLY thick purple border on the top,

0:03:46.078,0:03:49.238
we'll add another property. "border-top:

0:03:49.248,0:03:56.538
10px solid purple;." Cool! Now, let's add

0:03:56.545,0:03:59.785
a frame to the image. and play around with

0:03:59.785,0:04:02.225
border styles. So going up to our

0:04:02.225,0:04:07.605
"cute-cat," uh, let's see, "border: 6px,"

0:04:07.605,0:04:12.985
let's try "groove red." Okay. Now I don't

0:04:12.985,0:04:16.405
like groove, let's try "double?" Eh, let's

0:04:16.405,0:04:19.185
try "ridge." Ah-ha! Now that looks like a

0:04:19.185,0:04:22.665
frame. Now how about a border around our

0:04:22.665,0:04:25.985
official info? Uh, let's see, "border:,"

0:04:25.985,0:04:28.405
let's not make it too big, "2px," let's

0:04:28.405,0:04:31.185
try "dotted" and then, uh, let's pick an,

0:04:31.200,0:04:35.960
uh, just a subtle gray, uh, lemme try

0:04:35.960,0:04:38.230
"dashed" instead. Okay, that - that's what

0:04:38.238,0:04:40.958
I want. Now with all these borders,

0:04:40.958,0:04:42.438
something is bothering me a little.

0:04:42.438,0:04:45.018
Actually, something is bothering me a LOT.

0:04:45.018,0:04:48.878
See how the text is butting up next to the

0:04:48.878,0:04:51.628
border in the "container?" And - and

0:04:51.628,0:04:53.438
butting against the text in the official

0:04:53.438,0:04:56.518
info? That's so gross-looking, and it

0:04:56.518,0:04:59.738
makes it harder to read the text. THAT is

0:04:59.738,0:05:02.198
where padding comes in. Whenever your

0:05:02.198,0:05:03.778
elements have `background-color`s or

0:05:03.778,0:05:05.392
`border`s, you almost ALWAYS want to add

0:05:05.392,0:05:07.632
padding, to put a bit of space between the

0:05:07.632,0:05:10.092
contents and the edges. Let's add some

0:05:10.106,0:05:13.296
padding to the "container," just...let's

0:05:13.315,0:05:17.985
do 15px all around the container. Oh. So

0:05:17.991,0:05:21.241
much better. Uh, let's add...let's add

0:05:21.241,0:05:23.371
some padding to our official info, let's

0:05:23.372,0:05:27.882
see: "padding: 6px," oh, beautiful. Now,

0:05:27.882,0:05:29.362
we don't need to add padding to the image,

0:05:29.363,0:05:31.003
since images actually look good inside

0:05:31.012,0:05:33.852
frames like that. And there you have it:

0:05:33.852,0:05:36.182
the box model. Margin, border, and

0:05:36.182,0:05:38.362
padding. I used big values and bright

0:05:38.362,0:05:40.392
colors to show them off to you, but my

0:05:40.392,0:05:42.942
page DOES look a bit cheesy now. If you

0:05:42.960,0:05:44.270
want your page to look sleek and

0:05:44.270,0:05:46.690
sophisticated, try using more subtle

0:05:46.690,0:05:49.120
whites and grays. Whatever you do, make

0:05:49.120,0:05:50.870
sure you use these properties, because

0:05:50.870,0:05:52.710
they'll have a big effect on how your page

0:05:52.000,0:05:53.720
looks and feels.