WEBVTT 00:00:00.000 --> 00:00:02.497 You know how we made something that 00:00:02.538 --> 00:00:04.578 looked like a box in the last 00:00:04.591 --> 00:00:06.832 talk-through by making this `div` and then 00:00:06.909 --> 00:00:08.352 giving it a `background-color`? 00:00:08.352 --> 00:00:10.855 Well, actually, every element on your 00:00:10.865 --> 00:00:12.728 webpage is considered a box 00:00:12.728 --> 00:00:15.148 by the browser, whether or not it looks 00:00:15.149 --> 00:00:18.348 like a box to you. This heading is a box.. 00:00:18.348 --> 00:00:22.128 this paragraph is a box..even this `span` 00:00:22.128 --> 00:00:25.178 that we made is a box. Some of the boxes 00:00:25.178 --> 00:00:29.688 are big, some are small, some are in line 00:00:29.688 --> 00:00:32.838 like the `span`, some are block, like the 00:00:32.838 --> 00:00:35.708 `div`. But they're all considered boxes. 00:00:35.708 --> 00:00:38.764 Why does this matter? 'Cause there's 00:00:38.764 --> 00:00:41.054 something called the "box model," which 00:00:41.080 --> 00:00:44.100 you can see in the diagram I just 00:00:44.100 --> 00:00:46.030 pasted in. Every element's box has four 00:00:46.033 --> 00:00:48.513 parts: the actual content, the padding, 00:00:48.517 --> 00:00:52.357 the border, and the margin. We can use CSS 00:00:52.357 --> 00:00:54.437 to modify the padding, border, and margin. 00:00:54.437 --> 00:00:56.507 So you'll understand soon what those 00:00:56.507 --> 00:00:59.177 really are. Let's start with the margin. 00:00:59.177 --> 00:01:01.657 That's the transparent area around the box 00:01:01.672 --> 00:01:03.822 that separates the box from other 00:01:03.822 --> 00:01:06.742 elements. We'll specify margin using our 00:01:06.749 --> 00:01:10.169 favorite unit: pixels. To add 15 pixels 00:01:10.169 --> 00:01:12.799 of margin on every side of the official 00:01:12.799 --> 00:01:16.799 info box, we can just write: `margin: 00:01:16.854 --> 00:01:22.284 15px;`. So, you see the change that made? 00:01:22.307 --> 00:01:25.027 What if we want a different amount of 00:01:25.027 --> 00:01:27.237 margin on each side? Like more on the 00:01:27.237 --> 00:01:29.647 top-bottom than the left-right? We can 00:01:29.647 --> 00:01:31.567 write those amounts in clockwise order, 00:01:31.643 --> 00:01:36.603 starting from the top. So top 15px, right 00:01:36.603 --> 00:01:43.983 0px, bottom 10px, left 6px. OR, we could 00:01:43.983 --> 00:01:46.363 use specific properties for each side, but 00:01:46.363 --> 00:01:48.813 we only wanna specify a few sides. Like if 00:01:48.813 --> 00:01:51.063 we want to have some space around the cat 00:01:51.080 --> 00:01:56.750 picture, on the right..and then, we also 00:01:56.762 --> 00:02:01.302 just want some on the bottom...and we're 00:02:01.302 --> 00:02:03.792 happy to have the default margin for the 00:02:03.792 --> 00:02:06.742 other sides. There's also a special value 00:02:06.742 --> 00:02:08.642 for margin that'll help us do something 00:02:08.644 --> 00:02:11.004 fancy with our pages. To show you that, 00:02:11.004 --> 00:02:14.234 I'm gonna add a `div` around the entire 00:02:14.234 --> 00:02:17.464 page. I'll give it an ID of "container." 00:02:17.464 --> 00:02:21.394 Let's put this ta-a-a-ag here, so it 00:02:21.394 --> 00:02:25.954 contains everything. Now, gonna add a rule 00:02:25.954 --> 00:02:29.374 for that `div` to give it a width of 400 00:02:29.374 --> 00:02:33.814 px, and I wanna center it on the page. I 00:02:33.814 --> 00:02:37.744 COULD specify a `margin-left: 100px;`, 00:02:37.744 --> 00:02:40.754 because that looks centered to me, but it 00:02:40.754 --> 00:02:42.584 may not be centered to you, because your 00:02:42.594 --> 00:02:45.074 browser may be bigger or smaller. What we 00:02:45.079 --> 00:02:46.779 want is to be able to say, "give it 00:02:46.861 --> 00:02:49.281 however much margin it needs so that it's 00:02:49.281 --> 00:02:52.821 got equal margin on both sides." That is 00:02:52.821 --> 00:02:56.341 exactly what `margin: auto;` does. And 00:02:56.341 --> 00:02:57.841 it's a great way to center `div`s on a 00:02:57.841 --> 00:03:01.471 page. Now that we've centered that `div`, 00:03:01.472 --> 00:03:04.012 we might wanna make it even more distinct 00:03:04.024 --> 00:03:06.304 by adding a border around the edge of it 00:03:06.333 --> 00:03:10.333 using the CSS border property. Let's add a 00:03:10.363 --> 00:03:13.483 red border to that `div`. We type 00:03:13.483 --> 00:03:15.283 "border:," and then we just need to 00:03:15.283 --> 00:03:16.943 specify three aspects of the border: 00:03:16.943 --> 00:03:19.783 thickness, style, and color. For a thin 00:03:19.783 --> 00:03:23.473 border, I'll just type "1px," uh, for a 00:03:23.473 --> 00:03:25.633 solid line, nothing fancy, we'll just 00:03:25.639 --> 00:03:28.969 type "solid," and...to make it red I'll 00:03:28.969 --> 00:03:31.649 just pop up my R G B color picker and pick 00:03:31.649 --> 00:03:37.769 a nice...fiery red. Okay. Just like with 00:03:37.769 --> 00:03:39.919 margin, we can specify the border for 00:03:39.919 --> 00:03:42.789 just, like, one side. Like if we want a 00:03:42.798 --> 00:03:46.078 REALLY thick purple border on the top, 00:03:46.078 --> 00:03:49.238 we'll add another property. "border-top: 00:03:49.248 --> 00:03:56.538 10px solid purple;." Cool! Now, let's add 00:03:56.545 --> 00:03:59.785 a frame to the image. and play around with 00:03:59.785 --> 00:04:02.225 border styles. So going up to our 00:04:02.225 --> 00:04:07.605 "cute-cat," uh, let's see, "border: 6px," 00:04:07.605 --> 00:04:12.985 let's try "groove red." Okay. Now I don't 00:04:12.985 --> 00:04:16.405 like groove, let's try "double?" Eh, let's 00:04:16.405 --> 00:04:19.185 try "ridge." Ah-ha! Now that looks like a 00:04:19.185 --> 00:04:22.665 frame. Now how about a border around our 00:04:22.665 --> 00:04:25.985 official info? Uh, let's see, "border:," 00:04:25.985 --> 00:04:28.405 let's not make it too big, "2px," let's 00:04:28.405 --> 00:04:31.185 try "dotted" and then, uh, let's pick an, 00:04:31.200 --> 00:04:35.960 uh, just a subtle gray, uh, lemme try 00:04:35.960 --> 00:04:38.230 "dashed" instead. Okay, that - that's what 00:04:38.238 --> 00:04:40.958 I want. Now with all these borders, 00:04:40.958 --> 00:04:42.438 something is bothering me a little. 00:04:42.438 --> 00:04:45.018 Actually, something is bothering me a LOT. 00:04:45.018 --> 00:04:48.878 See how the text is butting up next to the 00:04:48.878 --> 00:04:51.628 border in the "container?" And - and 00:04:51.628 --> 00:04:53.438 butting against the text in the official 00:04:53.438 --> 00:04:56.518 info? That's so gross-looking, and it 00:04:56.518 --> 00:04:59.738 makes it harder to read the text. THAT is 00:04:59.738 --> 00:05:02.198 where padding comes in. Whenever your 00:05:02.198 --> 00:05:03.778 elements have `background-color`s or 00:05:03.778 --> 00:05:05.392 `border`s, you almost ALWAYS want to add 00:05:05.392 --> 00:05:07.632 padding, to put a bit of space between the 00:05:07.632 --> 00:05:10.092 contents and the edges. Let's add some 00:05:10.106 --> 00:05:13.296 padding to the "container," just...let's 00:05:13.315 --> 00:05:17.985 do 15px all around the container. Oh. So 00:05:17.991 --> 00:05:21.241 much better. Uh, let's add...let's add 00:05:21.241 --> 00:05:23.371 some padding to our official info, let's 00:05:23.372 --> 00:05:27.882 see: "padding: 6px," oh, beautiful. Now, 00:05:27.882 --> 00:05:29.362 we don't need to add padding to the image, 00:05:29.363 --> 00:05:31.003 since images actually look good inside 00:05:31.012 --> 00:05:33.852 frames like that. And there you have it: 00:05:33.852 --> 00:05:36.182 the box model. Margin, border, and 00:05:36.182 --> 00:05:38.362 padding. I used big values and bright 00:05:38.362 --> 00:05:40.392 colors to show them off to you, but my 00:05:40.392 --> 00:05:42.942 page DOES look a bit cheesy now. If you 00:05:42.960 --> 00:05:44.270 want your page to look sleek and 00:05:44.270 --> 00:05:46.690 sophisticated, try using more subtle 00:05:46.690 --> 00:05:49.120 whites and grays. Whatever you do, make 00:05:49.120 --> 00:05:50.870 sure you use these properties, because 00:05:50.870 --> 00:05:52.710 they'll have a big effect on how your page 00:05:52.000 --> 00:05:53.720 looks and feels.