1 00:00:08,826 --> 00:00:09,510 Hi. 2 00:00:09,510 --> 00:00:11,740 Today we're going to talk about the box model. 3 00:00:11,740 --> 00:00:16,120 And what the box model is, is really a general concept of CSS 4 00:00:16,120 --> 00:00:20,380 that helps you size and place your element where you want them to go. 5 00:00:20,380 --> 00:00:23,720 So, one of the first things we're gonna talk about is height and width. 6 00:00:23,720 --> 00:00:26,740 I know I've already used this a little bit in some of my other lectures, but 7 00:00:26,740 --> 00:00:29,380 I wanted to be very specific in how it works. 8 00:00:29,380 --> 00:00:31,750 And one of the first things you need to know is that the height and 9 00:00:31,750 --> 00:00:35,470 width of any inline element is the content itself. 10 00:00:35,470 --> 00:00:38,550 So, if you have a link, the height and 11 00:00:38,550 --> 00:00:41,840 width of that link is just the text of the clickable part of the link. 12 00:00:43,000 --> 00:00:47,430 Elements that are not inline, things that are block, inline block, things like that, 13 00:00:47,430 --> 00:00:52,750 they can take height and width properties, and we saw this in the Display lecture. 14 00:00:52,750 --> 00:00:55,570 So any time you have something that's inline, if you give it a height and 15 00:00:55,570 --> 00:00:57,830 a width, the browser just ignores it. 16 00:00:57,830 --> 00:01:02,170 Anything else, the browser goes great, I can go ahead and change that for you. 17 00:01:02,170 --> 00:01:06,110 Some of the other things we want to think about then, when we have elements, 18 00:01:06,110 --> 00:01:08,760 is how they fit on the screen. 19 00:01:08,760 --> 00:01:10,260 One of the easiest ways for 20 00:01:10,260 --> 00:01:15,030 you to strategically place things on your page is to put borders around them. 21 00:01:15,030 --> 00:01:18,188 Even if you don't want those borders later in your final product, 22 00:01:18,188 --> 00:01:22,910 I find it's very helpful to have this idea of how much space an element is taking up. 23 00:01:22,910 --> 00:01:26,650 So any element can have a border around it whether its inline, 24 00:01:26,650 --> 00:01:29,120 or block, or inline block. 25 00:01:29,120 --> 00:01:32,572 And those border properties specify what style border you want, 26 00:01:32,572 --> 00:01:34,525 what width of border and what color. 27 00:01:34,525 --> 00:01:37,030 They're pretty straightforward. 28 00:01:37,030 --> 00:01:40,750 The border style is the only one that must be specified. 29 00:01:40,750 --> 00:01:44,735 If you don't specify a color, or you don't specify a width, no problem. 30 00:01:44,735 --> 00:01:47,470 It'll default to black and probably one pixel. 31 00:01:47,470 --> 00:01:50,550 But you have to decide what kind of style you want. 32 00:01:50,550 --> 00:01:55,430 So, in this case, I've said, for all my divs, I want them to have a solid 33 00:01:55,430 --> 00:01:58,690 one pixel border around them, and I can't tell you what color that is, 34 00:01:58,690 --> 00:02:01,610 cuz I'm not quite that geeky yet, but I'd guess something like blue. 35 00:02:02,900 --> 00:02:07,043 The border style that you wanna specify, while most people always use solid, 36 00:02:07,043 --> 00:02:08,998 there's a lot of different styles. 37 00:02:08,998 --> 00:02:13,969 You can use dotted, dashed, grooved, ridged, hidden, inset, outset. 38 00:02:13,969 --> 00:02:16,080 There's a lot of different things you can do, and 39 00:02:16,080 --> 00:02:18,970 it's really kind of a stylistic difference on your part. 40 00:02:18,970 --> 00:02:22,140 I don't really pay much attention to them cuz I've always just used solid myself. 41 00:02:22,140 --> 00:02:27,510 Once you've decided what kind of style you want, you can specify the width and color. 42 00:02:27,510 --> 00:02:31,150 So when it comes time to set the width, if you decide to, is you can set it in 43 00:02:31,150 --> 00:02:35,760 a number of pixels or you can use the key words, thin, medium, or large. 44 00:02:36,880 --> 00:02:38,570 When it comes time to do the color, 45 00:02:38,570 --> 00:02:40,710 you can do the same thing we've been doing all along. 46 00:02:40,710 --> 00:02:45,350 You can just use the name, such as blue, the RGB value, 47 00:02:45,350 --> 00:02:49,160 the hex value, or just so you know, it's also transparent. 48 00:02:49,160 --> 00:02:51,800 So it can just take the color of whatever's underneath it. 49 00:02:51,800 --> 00:02:56,030 So when it comes time for you to specify how big you want your border to go, 50 00:02:56,030 --> 00:02:58,250 you can specify in four different ways. 51 00:02:58,250 --> 00:03:00,550 In the first example, you just give it one number. 52 00:03:00,550 --> 00:03:02,180 In this case, three pixels. 53 00:03:02,180 --> 00:03:03,650 And what it's going to do, 54 00:03:03,650 --> 00:03:07,870 is it's going to put a three pixel border around the entire element just like this. 55 00:03:08,950 --> 00:03:13,520 If you decide to give it two values, is it's going to set a three pixel border on 56 00:03:13,520 --> 00:03:18,360 the top and the bottom, and a ten pixel border on the left and the right. 57 00:03:18,360 --> 00:03:22,140 This is a really common way to set things up when you're doing borders and 58 00:03:22,140 --> 00:03:24,660 other properties, because it's a really nice shorthand 59 00:03:24,660 --> 00:03:27,400 that's still very simple to understand and read. 60 00:03:28,420 --> 00:03:32,370 If you give it three values, it's a little bit trickier, and I always 61 00:03:32,370 --> 00:03:36,010 stumble over what it is, so I'm gonna pop the picture up just to make sure. 62 00:03:36,010 --> 00:03:38,320 The first value is always the top. 63 00:03:38,320 --> 00:03:41,090 You want your top border to be 3 pixels. 64 00:03:41,090 --> 00:03:45,858 The 10 pixels is for the left and right, and the 20 pixels is for the bottom. 65 00:03:45,858 --> 00:03:50,372 The last one is when you give four values, and when you give four values, 66 00:03:50,372 --> 00:03:54,150 that basically means top, right, bottom, left. 67 00:03:54,150 --> 00:03:57,790 And that's going to set the border to four different values. 68 00:03:57,790 --> 00:04:01,170 So most people either use the one value, 69 00:04:01,170 --> 00:04:04,560 the four values, and a few people use the two values as well. 70 00:04:04,560 --> 00:04:07,840 Mostly, and one of the reasons I show this to you is, it can be really intimidating, 71 00:04:07,840 --> 00:04:10,350 and you're wondering what people are doing when they're going on. 72 00:04:10,350 --> 00:04:11,370 This is what they're doing. 73 00:04:11,370 --> 00:04:14,480 They're using shorthands so that they don't have to have border right, 74 00:04:14,480 --> 00:04:16,510 border left, border top, border bottom. 75 00:04:17,610 --> 00:04:21,120 Margin is basically that space that's outside of your border. 76 00:04:21,120 --> 00:04:23,100 It's between, when I say you and your neighbor, or 77 00:04:23,100 --> 00:04:26,572 what I should really say is between the element, and the element's neighbor. 78 00:04:26,572 --> 00:04:29,460 So it gives you that elbow room where you don't want anybody touching you. 79 00:04:30,650 --> 00:04:33,090 With margins, whenever you give it a positive margin, 80 00:04:33,090 --> 00:04:37,210 you're basically saying, move your element to the right or down. 81 00:04:37,210 --> 00:04:38,770 If you give it a negative margin, 82 00:04:38,770 --> 00:04:40,970 you're actually having it move closer to the neighbor. 83 00:04:40,970 --> 00:04:43,150 You are having it move left or upward. 84 00:04:44,520 --> 00:04:48,110 Padding is very similar in concept to margin, but 85 00:04:48,110 --> 00:04:51,250 instead this space is between the element and its border. 86 00:04:51,250 --> 00:04:53,350 It's giving it a little bit of extra space inside. 87 00:04:53,350 --> 00:04:57,380 You might almost think of it as squishing the text in some cases. 88 00:04:57,380 --> 00:04:59,920 In the same way, whenever you have positive values for 89 00:04:59,920 --> 00:05:02,320 padding, you're moving it outward from the element. 90 00:05:02,320 --> 00:05:03,820 You're giving it more space. 91 00:05:03,820 --> 00:05:07,830 If you give it a negative padding, you're actually moving the border close to or 92 00:05:07,830 --> 00:05:11,170 maybe even on top of the elements that are next to it. 93 00:05:11,170 --> 00:05:15,390 So with margin and padding, all you're going to do is give a numerical value. 94 00:05:15,390 --> 00:05:18,370 You're gonna give it something like 3 pixels or 10%. 95 00:05:18,370 --> 00:05:20,120 You don't give it any type of color. 96 00:05:20,120 --> 00:05:22,240 It's always gonna be transparent. 97 00:05:22,240 --> 00:05:26,000 The padding is always gonna be the same color as the element, and the margin's 98 00:05:26,000 --> 00:05:30,180 always gonna be the same color of the parent, probably the body of the page. 99 00:05:30,180 --> 00:05:34,390 They, just like the border, can be defined in that one to four values. 100 00:05:34,390 --> 00:05:39,260 So if you put margin three pixels, it will be a three pixel margin around everything. 101 00:05:39,260 --> 00:05:42,810 If you say padding, ten pixels, five pixels, you'll have top, 102 00:05:42,810 --> 00:05:43,940 bottom, left and right. 103 00:05:45,050 --> 00:05:47,910 So let me show you a quick picture of kind of what I'm talking about. 104 00:05:47,910 --> 00:05:51,170 In this case, here is my text is my actual element. 105 00:05:51,170 --> 00:05:53,390 I've said this is what I want to go on. 106 00:05:53,390 --> 00:05:56,700 The blue is the border around my element. 107 00:05:56,700 --> 00:05:57,890 The yellow is the padding. 108 00:05:57,890 --> 00:06:02,110 It's that space between my text and the border, and that orange is the margin, and 109 00:06:02,110 --> 00:06:04,850 what you're saying is, don't put me near anything else. 110 00:06:04,850 --> 00:06:06,950 Give me this much space around myself. 111 00:06:06,950 --> 00:06:08,540 So, it might move your paragraphs down. 112 00:06:08,540 --> 00:06:10,730 It might move your divs down and over. 113 00:06:10,730 --> 00:06:13,180 So, just practice this. 114 00:06:13,180 --> 00:06:14,460 And as you play with it more and more, 115 00:06:14,460 --> 00:06:17,390 it'll make more sense which one's a margin and which one's the padding. 116 00:06:17,390 --> 00:06:22,390 One of the things you need to understand when you're doing padding and border and 117 00:06:22,390 --> 00:06:26,390 margin, and all these things is that in HTML says, your height and 118 00:06:26,390 --> 00:06:27,800 your width is additive. 119 00:06:27,800 --> 00:06:31,340 And so what that means is if you decide that you want the width of your element 120 00:06:31,340 --> 00:06:34,470 to be 200 pixels, you probably need to take into account 121 00:06:34,470 --> 00:06:37,630 how big all those other aspects and properties are. 122 00:06:37,630 --> 00:06:43,250 So, in this case, part of the width is the margin, plus the border, 123 00:06:43,250 --> 00:06:46,910 plus the padding, plus the actual element with itself. 124 00:06:46,910 --> 00:06:49,720 And so it all really adds up to get what we consider the actual 125 00:06:49,720 --> 00:06:50,870 width of your element. 126 00:06:50,870 --> 00:06:53,420 And this is gonna matter when you're looking at your page and you're designing 127 00:06:53,420 --> 00:06:57,040 it and trying to decide how much space you want each element to take up. 128 00:06:57,040 --> 00:07:00,810 So if we look at this example right here where I have the width is 100px, 129 00:07:00,810 --> 00:07:06,330 the padding is 10px, the margin is 5px and the border is 1px. 130 00:07:06,330 --> 00:07:08,720 I'm hoping that right now, you're doing the math in your head, and 131 00:07:08,720 --> 00:07:12,240 I promise not to give much more math than this, but you're doing it to figure out 132 00:07:12,240 --> 00:07:16,520 how much width does this element, does this div, actually need on the page. 133 00:07:16,520 --> 00:07:19,696 And in this case the width is 132 pixels. 134 00:07:19,696 --> 00:07:26,476 The 100, plus 10, plus five, plus one, plus one, plus five, plus ten. 135 00:07:26,476 --> 00:07:27,910 It all adds up. 136 00:07:27,910 --> 00:07:32,190 The height, in the same way, is your height plus the top and bottom padding, 137 00:07:32,190 --> 00:07:34,400 top and bottom margin, and the top and bottom border. 138 00:07:35,852 --> 00:07:38,250 All right, so when we talk about margin, 139 00:07:38,250 --> 00:07:41,180 I just wanted to throw this slide in even though it doesn't 140 00:07:41,180 --> 00:07:44,220 mesh with a lot of the other things we've been necessary talking about. 141 00:07:44,220 --> 00:07:46,560 But it's because margin is very important for 142 00:07:46,560 --> 00:07:48,770 when you want to center elements on a page. 143 00:07:48,770 --> 00:07:53,060 When we want to center text, we could just use text align center, 144 00:07:53,060 --> 00:07:54,280 and everything looked really good. 145 00:07:54,280 --> 00:07:57,780 But when you want to center elements, it's a little bit more difficult. 146 00:07:57,780 --> 00:08:01,660 And so the default way to do this is to use the command margin zero auto. 147 00:08:01,660 --> 00:08:06,060 So if you remember, that first zero, that stands for top and bottom, and 148 00:08:06,060 --> 00:08:08,000 so it's going to not really care about that. 149 00:08:08,000 --> 00:08:10,960 The auto is what puts it left and right. 150 00:08:10,960 --> 00:08:16,140 Now this is only going to work if the element happens to be display:block, 151 00:08:16,140 --> 00:08:20,530 if the element is not floating, is the element has a width that's not auto, 152 00:08:20,530 --> 00:08:21,920 which means that you set it. 153 00:08:21,920 --> 00:08:26,280 And this last one is if the element is not fixed or absolute position. 154 00:08:26,280 --> 00:08:28,460 Now I haven't covered position yet. 155 00:08:28,460 --> 00:08:31,110 And so the good news is, since I haven't covered it, you probably haven't 156 00:08:31,110 --> 00:08:34,010 messed with it, and you don't have to worry about these two things. 157 00:08:34,010 --> 00:08:37,780 But as you try to send your elements, come back to this slide if you need to, 158 00:08:37,780 --> 00:08:41,010 and check these off to make sure that all these properties fit. 159 00:08:41,010 --> 00:08:44,130 And that's the best way to center things right now. 160 00:08:44,130 --> 00:08:47,620 Finally, when we talk about this I want to add one more option, and 161 00:08:47,620 --> 00:08:48,944 that's called box-sizing. 162 00:08:48,944 --> 00:08:53,733 And what box-sizing does is it takes some of the math out of that additive height 163 00:08:53,733 --> 00:08:55,029 and additive width. 164 00:08:55,029 --> 00:08:59,332 What your options are is you can have content-box, so box-sizing content-box, 165 00:08:59,332 --> 00:09:01,780 and that's just your default additive. 166 00:09:01,780 --> 00:09:04,520 You're gonna have to remember how much space you're using. 167 00:09:04,520 --> 00:09:06,456 The next one is called border-box. 168 00:09:06,456 --> 00:09:10,330 And border-box actually takes the width, the content, the padding, and 169 00:09:10,330 --> 00:09:12,230 the border all into consideration. 170 00:09:12,230 --> 00:09:15,190 So, if you say you want the width to be 200 pixels, 171 00:09:15,190 --> 00:09:17,970 it's not going to actually make the element 200 pixels. 172 00:09:17,970 --> 00:09:21,800 It's gonna make it 200 pixels minus the padding and border. 173 00:09:21,800 --> 00:09:26,300 One of the last things to remember is that we'll take into account padding and 174 00:09:26,300 --> 00:09:28,910 border, it won't take into account margin. 175 00:09:28,910 --> 00:09:30,050 So finally, 176 00:09:30,050 --> 00:09:33,110 one of the things I'm going to be showing you in this example in just a second, 177 00:09:33,110 --> 00:09:36,580 is different ways you can set the height and width of different elements. 178 00:09:36,580 --> 00:09:38,670 And there's two common ways to do this. 179 00:09:38,670 --> 00:09:40,640 The first one is called absolute, and 180 00:09:40,640 --> 00:09:43,310 that's when you set an element to a specific size. 181 00:09:43,310 --> 00:09:46,440 You say I want it to be so many pixels, or so many millimeters, or so 182 00:09:46,440 --> 00:09:47,660 many centimeters. 183 00:09:47,660 --> 00:09:50,580 Pixels is a very common way to set sizes. 184 00:09:50,580 --> 00:09:53,160 The other type of measurement is what I call fluid, and 185 00:09:53,160 --> 00:09:57,530 it sets the size relative to surrounding elements or the parent elements. 186 00:09:57,530 --> 00:09:59,018 So you can use things such as percent. 187 00:09:59,018 --> 00:10:01,790 You can use vw, which stands for 188 00:10:01,790 --> 00:10:05,260 viewport width, vh which stands for viewport height. 189 00:10:05,260 --> 00:10:09,930 You can even use things such as em and rem, which aren't commonly used, but 190 00:10:09,930 --> 00:10:13,580 they actually set the size relative to its parents. 191 00:10:13,580 --> 00:10:15,360 So let's go ahead and move to my example so 192 00:10:15,360 --> 00:10:17,150 we can play with this just a little bit. 193 00:10:17,150 --> 00:10:20,130 It's not gonna be enough to demonstrate everything that we can do, but 194 00:10:20,130 --> 00:10:22,080 hopefully it'll get you started. 195 00:10:22,080 --> 00:10:25,090 What I have here is a very simple HTML file 196 00:10:25,090 --> 00:10:27,150 where I have a left side and right side. 197 00:10:27,150 --> 00:10:29,970 But as you can see, they're not to the left and the right right now. 198 00:10:29,970 --> 00:10:31,590 They're just on top of each other. 199 00:10:31,590 --> 00:10:35,880 So the first thing I wanna know is, can you put these divs next to each other? 200 00:10:35,880 --> 00:10:39,900 We're gonna have to use a kind of combination of display, and height, and 201 00:10:39,900 --> 00:10:40,860 width, and padding. 202 00:10:40,860 --> 00:10:42,510 So let's go ahead and do that. 203 00:10:42,510 --> 00:10:44,140 So over here in my CSS file, 204 00:10:44,140 --> 00:10:48,420 right away you can see this kind of the background things I've done. 205 00:10:48,420 --> 00:10:51,820 Now, when you want things to be next to each other, you have to give them a width, 206 00:10:51,820 --> 00:10:54,200 because right now they take up 100%. 207 00:10:54,200 --> 00:10:57,760 One option would be for you to go ahead and set it to some sort of pixels. 208 00:10:57,760 --> 00:11:01,266 And say maybe 200 pixels and 200 pixels, and see what would happen, 209 00:11:01,266 --> 00:11:02,710 see if it works out. 210 00:11:02,710 --> 00:11:07,481 The problem with doing that, as I uncomment my code here, is that as people 211 00:11:07,481 --> 00:11:12,272 go on different browser sizes, your numbers might be too big or too small. 212 00:11:12,272 --> 00:11:17,427 So what I've done here is I went ahead and I set my width to 48%. 213 00:11:17,427 --> 00:11:20,993 Now doing that is really great, and I'm going to come out of this one line for 214 00:11:20,993 --> 00:11:24,003 just a second, because most people get that idea that you want to 215 00:11:24,003 --> 00:11:26,230 set the width to something smaller. 216 00:11:26,230 --> 00:11:30,650 What they forget, is that even though they're only taking up 48%, 217 00:11:30,650 --> 00:11:34,250 in fact I'll even just make it something really small. 218 00:11:35,295 --> 00:11:39,870 20%, they're not going next to each other. 219 00:11:39,870 --> 00:11:43,740 So you need to remember that you want to use those fluid measurements. 220 00:11:43,740 --> 00:11:46,260 So let's go back here, I'm going to put it back to 40%. 221 00:11:46,260 --> 00:11:50,170 Even if you make it really skinny, until you tell the browser, 222 00:11:50,170 --> 00:11:52,910 oh, I know this is blocked but I'm going to change it to in-line block, 223 00:11:52,910 --> 00:11:55,430 it'll never let block elements be next to each other. 224 00:11:55,430 --> 00:11:58,500 So that's why you have to remember to do both of those elements. 225 00:11:58,500 --> 00:12:01,230 So let's go ahead and save and reload. 226 00:12:01,230 --> 00:12:04,170 And so you can see that I've gone ahead and I've done my width. 227 00:12:04,170 --> 00:12:05,750 I've done my display block. 228 00:12:05,750 --> 00:12:07,230 I've got my padding. 229 00:12:07,230 --> 00:12:09,560 I've got my border, and I've got some margin. 230 00:12:09,560 --> 00:12:12,830 So last thing I'm gonna do, just to end this up to show you what's going on, 231 00:12:12,830 --> 00:12:13,750 is I'm gonna go ahead and 232 00:12:13,750 --> 00:12:17,860 change this to 50%, because this is a really common mistake people make. 233 00:12:17,860 --> 00:12:20,270 They say oh, I want two things next to each other. 234 00:12:20,270 --> 00:12:22,010 So I'm gonna make them each 50%. 235 00:12:22,010 --> 00:12:24,105 Don't forget when you do that, 236 00:12:24,105 --> 00:12:29,396 it doesn't work because that's 50% before you put the border into account. 237 00:12:29,396 --> 00:12:32,079 So make sure that you're playing with all these things, that you're playing with 238 00:12:32,079 --> 00:12:34,783 the margin, you're playing with the padding, you're playing with the border. 239 00:12:34,783 --> 00:12:38,699 Cuz that's how you're gonna get things to work, by tweaking, tweaking, tweaking. 240 00:12:40,030 --> 00:12:41,940 So let's go ahead and review. 241 00:12:41,940 --> 00:12:44,910 When it comes time for you to start implementing all these ideas, 242 00:12:44,910 --> 00:12:47,320 your box model with your padding, content, margin, 243 00:12:47,320 --> 00:12:52,270 etc., you really wanna design sketches on paper first, cuz it's really hard to 244 00:12:52,270 --> 00:12:55,980 shove things in after you've already come up with an outline, all right? 245 00:12:55,980 --> 00:12:58,890 So design first, code second. 246 00:12:58,890 --> 00:13:01,990 The second thing you might wanna do is use the box model 247 00:13:01,990 --> 00:13:04,210 to reduce the complexity of your code. 248 00:13:04,210 --> 00:13:07,280 Or at least the complexity of your math trying to figure out 249 00:13:07,280 --> 00:13:08,610 what things fit where. 250 00:13:09,890 --> 00:13:11,365 Finally, no matter what you do, 251 00:13:11,365 --> 00:13:14,965 you need to remember that margin always has to be considered. 252 00:13:14,965 --> 00:13:17,735 It can be tricky when you first start trying to put your page together, 253 00:13:17,735 --> 00:13:20,565 and getting things to go exactly where you want them to go, and 254 00:13:20,565 --> 00:13:24,555 we haven't even talked about positioning yet, which would be even another element. 255 00:13:24,555 --> 00:13:27,645 So for right now, practice these things in small ways. 256 00:13:27,645 --> 00:13:31,460 Use Inspect Element to play with it and not have to change your code so much. 257 00:13:31,460 --> 00:13:34,370 Until you get things looking just the way you want them to look. 258 00:13:34,370 --> 00:13:36,560 And don't worry, we're all making mistakes. 259 00:13:36,560 --> 00:13:37,850 We're all doing this together. 260 00:13:37,850 --> 00:13:40,010 But I think your page is hopefully getting closer and 261 00:13:40,010 --> 00:13:43,320 closer to something that you would really want to put out on the web. 262 00:13:43,320 --> 00:13:43,820 Good job.