1 00:00:00,360 --> 00:00:02,009 Instructor: Hey guys, in this lesson, 2 00:00:02,009 --> 00:00:02,843 we're gonna talk about 3 00:00:02,843 --> 00:00:06,480 some other really important CSS properties, 4 00:00:06,480 --> 00:00:08,430 and they're ones that you might've already seen 5 00:00:08,430 --> 00:00:10,920 if you've been doing a little bit of CSS inspection 6 00:00:10,920 --> 00:00:12,450 around the internet. 7 00:00:12,450 --> 00:00:16,920 And these are margin, padding, and the border properties. 8 00:00:16,920 --> 00:00:20,820 And these three properties, along with width and height, 9 00:00:20,820 --> 00:00:25,820 form a really important CSS concept known as the box model. 10 00:00:26,070 --> 00:00:28,170 So what exactly is it? 11 00:00:28,170 --> 00:00:30,660 Well, if you think about a typical website, 12 00:00:30,660 --> 00:00:33,480 here I've created one called I Love Bacon, 13 00:00:33,480 --> 00:00:36,270 then you've got different components that are on screen, 14 00:00:36,270 --> 00:00:38,310 different HTML elements. 15 00:00:38,310 --> 00:00:42,450 And even though we can't really see it effectively, 16 00:00:42,450 --> 00:00:45,930 each element is a box in itself, 17 00:00:45,930 --> 00:00:48,630 and we can change the dimensions of those boxes 18 00:00:48,630 --> 00:00:51,390 by changing things such as width and height. 19 00:00:51,390 --> 00:00:54,510 So in this case, I've made my bacon much, much bigger, 20 00:00:54,510 --> 00:00:57,120 and that invisible box around the element 21 00:00:57,120 --> 00:01:00,540 describes how it would be laid out on screen. 22 00:01:00,540 --> 00:01:03,960 If we have an element that has a height of 300 pixels, 23 00:01:03,960 --> 00:01:05,550 we can change that height 24 00:01:05,550 --> 00:01:09,000 to allow our element to take up more vertical spacing 25 00:01:09,000 --> 00:01:10,530 on the webpage. 26 00:01:10,530 --> 00:01:14,070 And when this happens, it pushes the box 27 00:01:14,070 --> 00:01:18,690 of any other elements lower on the webpage. 28 00:01:18,690 --> 00:01:21,990 Now, similarly, we can also change the width of an element 29 00:01:21,990 --> 00:01:24,780 to allow it to take up more space horizontally. 30 00:01:24,780 --> 00:01:29,250 And we can either do this using pixels, as defined here, 31 00:01:29,250 --> 00:01:31,560 or we can use percentages. 32 00:01:31,560 --> 00:01:34,590 So in this case, we've got our blue element 33 00:01:34,590 --> 00:01:38,190 to take up the entire width of the website, 34 00:01:38,190 --> 00:01:41,310 and that can be done using percentages. 35 00:01:41,310 --> 00:01:43,800 In addition to width and height, 36 00:01:43,800 --> 00:01:48,780 we can also set a border on each of the HTML elements. 37 00:01:48,780 --> 00:01:52,710 If you imagine, again, each HTML element being a box, 38 00:01:52,710 --> 00:01:55,263 then this would be the border of the box. 39 00:01:56,310 --> 00:01:58,800 And the way that the border property works 40 00:01:58,800 --> 00:02:00,060 is a little bit different 41 00:02:00,060 --> 00:02:02,250 from what you might have seen before. 42 00:02:02,250 --> 00:02:07,250 It can take three values separated by a space. 43 00:02:08,039 --> 00:02:10,289 The first value that you should provide 44 00:02:10,289 --> 00:02:13,533 is the thickness of the border. 45 00:02:14,430 --> 00:02:16,410 And this, as you can see here, 46 00:02:16,410 --> 00:02:18,690 is the thickness of this line. 47 00:02:18,690 --> 00:02:22,020 If I made it thicker, then it would look like this. 48 00:02:22,020 --> 00:02:25,440 And so we can provide a pixel value for the thickness 49 00:02:25,440 --> 00:02:27,330 as the first item. 50 00:02:27,330 --> 00:02:31,350 Now, the second item is the style of the border. 51 00:02:31,350 --> 00:02:33,150 You can have, for example, solid, 52 00:02:33,150 --> 00:02:35,970 but you can also have a dashed line, 53 00:02:35,970 --> 00:02:40,350 in which case the border would look something like this 54 00:02:40,350 --> 00:02:42,330 instead of a solid line, 55 00:02:42,330 --> 00:02:43,593 as we've gotten here. 56 00:02:44,940 --> 00:02:49,440 And finally, we've got the color of the border 57 00:02:49,440 --> 00:02:52,680 in which you can set to any named color or HEX color, 58 00:02:52,680 --> 00:02:55,560 as we've covered in the Color Properties lesson. 59 00:02:55,560 --> 00:02:58,140 These are three items together 60 00:02:58,140 --> 00:03:00,843 determine what the border should look like. 61 00:03:02,100 --> 00:03:05,220 So if I was to change the border from 10 pixels, 62 00:03:05,220 --> 00:03:10,220 the 30 pixels, then we would get a lot thicker of a border. 63 00:03:10,290 --> 00:03:12,210 But remember, the important thing 64 00:03:12,210 --> 00:03:17,210 is that the height and the width of your HTML element, 65 00:03:17,280 --> 00:03:20,100 your box does not change. 66 00:03:20,100 --> 00:03:24,150 It's exactly the same as what it was before. 67 00:03:24,150 --> 00:03:28,740 So this border actually goes outwards, rather than inwards. 68 00:03:28,740 --> 00:03:31,140 And that's the important thing to remember here. 69 00:03:32,340 --> 00:03:34,950 Now, once you've defined a border, 70 00:03:34,950 --> 00:03:39,090 you can further modify it with more specific rules. 71 00:03:39,090 --> 00:03:40,560 So for example, in this case, 72 00:03:40,560 --> 00:03:44,970 I've got a all-around 30-pixel solid black border 73 00:03:44,970 --> 00:03:46,740 around my element. 74 00:03:46,740 --> 00:03:50,010 But then afterwards on the next line, 75 00:03:50,010 --> 00:03:52,770 and this is very important, where this line goes, 76 00:03:52,770 --> 00:03:55,560 it has to go after the point where we've created the border. 77 00:03:55,560 --> 00:04:00,480 In this case, I'm saying I want the top of that border 78 00:04:00,480 --> 00:04:03,090 to be zero pixels instead. 79 00:04:03,090 --> 00:04:06,870 Well, the way that these rules are evaluated is first, 80 00:04:06,870 --> 00:04:09,450 they will look at this line creating this border, 81 00:04:09,450 --> 00:04:12,120 which is 30 pixels all around. 82 00:04:12,120 --> 00:04:14,340 But then once it lands on the next line, 83 00:04:14,340 --> 00:04:17,519 it evaluates this rule and sees that actually, 84 00:04:17,519 --> 00:04:21,660 I should amend the top of the border to have zero pixels. 85 00:04:21,660 --> 00:04:25,683 So effectively getting rid of the border at the top here, 86 00:04:26,700 --> 00:04:29,130 this border width works similarly 87 00:04:29,130 --> 00:04:31,710 to the way that the border property works. 88 00:04:31,710 --> 00:04:36,180 Namely, that can take a maximum of four values. 89 00:04:36,180 --> 00:04:41,180 The first value is the top, the second is the right, 90 00:04:41,400 --> 00:04:45,690 third is the bottom, and the fourth is the left. 91 00:04:45,690 --> 00:04:49,290 It goes in a clockwise direction. 92 00:04:49,290 --> 00:04:53,430 In addition, you can also just provide two values 93 00:04:53,430 --> 00:04:54,930 for the border width. 94 00:04:54,930 --> 00:04:59,930 And what that does is it sets 1 and 3 95 00:05:00,150 --> 00:05:03,870 and then it sets 2 and 4. 96 00:05:03,870 --> 00:05:06,450 For example, if my border width, 97 00:05:06,450 --> 00:05:11,450 I had set to zero pixels and 20 pixels, 98 00:05:11,640 --> 00:05:15,030 then what that would do is it would set 2 and 4, 99 00:05:15,030 --> 00:05:18,390 which is the left and right, to 20 pixels, 100 00:05:18,390 --> 00:05:21,870 and then it would set 1 and 3 to zero pixels. 101 00:05:21,870 --> 00:05:24,760 This then becomes top and bottom 102 00:05:26,460 --> 00:05:29,733 and then we've got our left and right. 103 00:05:31,890 --> 00:05:34,050 Now, another property I wanna talk about 104 00:05:34,050 --> 00:05:37,740 in regards to the box model is something called padding. 105 00:05:37,740 --> 00:05:39,270 And this is most easily seen 106 00:05:39,270 --> 00:05:42,150 when we have content such as text. 107 00:05:42,150 --> 00:05:42,983 So in this case, 108 00:05:42,983 --> 00:05:47,983 imagine that this blue box is a paragraph element. 109 00:05:48,660 --> 00:05:50,310 And in the paragraph element, 110 00:05:50,310 --> 00:05:53,850 we've got, "Hello world," repeated many, many times. 111 00:05:53,850 --> 00:05:57,720 This paragraph element has got a border property, 112 00:05:57,720 --> 00:06:00,540 and it's a solid black border 113 00:06:00,540 --> 00:06:03,393 measuring 30 pixels wide all around. 114 00:06:04,320 --> 00:06:09,320 If at this point I add a padding property to this element, 115 00:06:10,830 --> 00:06:12,090 then what would happen 116 00:06:12,090 --> 00:06:17,090 is it would push my border out by 20 pixels, 117 00:06:19,110 --> 00:06:24,110 and in this case I'm pushing it by 20 on all sides. 118 00:06:24,600 --> 00:06:27,540 And notice how, again, in this situation, 119 00:06:27,540 --> 00:06:32,540 the height and the width of this box does not change. 120 00:06:33,300 --> 00:06:34,980 It's still the same. 121 00:06:34,980 --> 00:06:39,390 The padding simply adds this padding or space 122 00:06:39,390 --> 00:06:43,173 between the element and the border. 123 00:06:44,130 --> 00:06:45,420 In addition to the padding, 124 00:06:45,420 --> 00:06:48,270 there's also something known as a margin, 125 00:06:48,270 --> 00:06:51,000 and the margin is actually the part 126 00:06:51,000 --> 00:06:54,660 that's outside of the border. 127 00:06:54,660 --> 00:06:57,090 So here again is the border, 128 00:06:57,090 --> 00:06:58,890 in between the border 129 00:06:58,890 --> 00:07:03,890 and the width and height of the element is the padding, 130 00:07:06,450 --> 00:07:08,370 and the part between the border 131 00:07:08,370 --> 00:07:12,870 and any other content that's on screen is the margin. 132 00:07:12,870 --> 00:07:13,920 So in this case, 133 00:07:13,920 --> 00:07:18,363 we've added a margin of 10 pixels on all four sides. 134 00:07:19,230 --> 00:07:21,450 If you imagine we had two elements, 135 00:07:21,450 --> 00:07:25,560 each with the same padding, margin, and border, 136 00:07:25,560 --> 00:07:28,590 then this margin or this distance 137 00:07:28,590 --> 00:07:31,680 between the two elements, in this case, 138 00:07:31,680 --> 00:07:33,990 will actually be 20 pixels 139 00:07:33,990 --> 00:07:35,940 because it's 10 pixels from this side 140 00:07:35,940 --> 00:07:37,980 and 10 pixels from this side. 141 00:07:37,980 --> 00:07:40,800 And it adds the spacing between elements 142 00:07:40,800 --> 00:07:43,680 that you would not get with the padding. 143 00:07:43,680 --> 00:07:45,993 So that is the main difference. 144 00:07:47,190 --> 00:07:49,020 In your CSS inspection, 145 00:07:49,020 --> 00:07:53,100 you might have seen the box model already shown 146 00:07:53,100 --> 00:07:55,920 in the CSS inspector, 147 00:07:55,920 --> 00:07:57,810 and it shows you the margin, 148 00:07:57,810 --> 00:08:01,500 the border, the padding, and the width and height. 149 00:08:01,500 --> 00:08:05,790 So that's what all of these different colors represent. 150 00:08:05,790 --> 00:08:10,530 And when you take a look at the box model on inspection, 151 00:08:10,530 --> 00:08:14,400 then you can actually change each of these values 152 00:08:14,400 --> 00:08:16,830 to see how it would look differently. 153 00:08:16,830 --> 00:08:18,471 If you head over to this address, 154 00:08:18,471 --> 00:08:22,830 appbrewery.github.io/box-model. 155 00:08:22,830 --> 00:08:26,280 And then we go ahead and open up the Developer Tools, 156 00:08:26,280 --> 00:08:29,550 and we select on the first image here, 157 00:08:29,550 --> 00:08:32,340 which shows a daytime world, 158 00:08:32,340 --> 00:08:36,690 and we go into the box model that's under the Styles tab. 159 00:08:36,690 --> 00:08:40,470 If I go ahead and add a margin right here, let's say, 160 00:08:40,470 --> 00:08:45,270 I don't know, 100 pixels, then it's going to add that gap. 161 00:08:45,270 --> 00:08:46,530 Did you see it just now, 162 00:08:46,530 --> 00:08:51,060 that gap between that image and anything that's below it? 163 00:08:51,060 --> 00:08:54,810 And similarly, if I add a little bit of a margin above, 164 00:08:54,810 --> 00:08:57,573 say 100 pixels, 165 00:08:59,190 --> 00:09:01,890 then you can see it adds a gap between that image 166 00:09:01,890 --> 00:09:03,960 and the next element above, 167 00:09:03,960 --> 00:09:06,120 which is that paragraph tag. 168 00:09:06,120 --> 00:09:10,113 However, if I added the padding as 100 pixels, 169 00:09:11,520 --> 00:09:14,940 then you'll see it add the space as well, 170 00:09:14,940 --> 00:09:19,940 but it's actually inside the border of the image. 171 00:09:20,190 --> 00:09:23,700 If this element actually had a border, 172 00:09:23,700 --> 00:09:28,700 which we'll set as 10 pixels solid black, 173 00:09:29,430 --> 00:09:32,670 then you can see how that padding goes to a different place 174 00:09:32,670 --> 00:09:35,370 versus where the border goes. 175 00:09:35,370 --> 00:09:39,480 And this box model is gonna come really, really handy 176 00:09:39,480 --> 00:09:40,650 when you start to try 177 00:09:40,650 --> 00:09:43,950 and lay out different items on your website, 178 00:09:43,950 --> 00:09:45,630 determining how they look 179 00:09:45,630 --> 00:09:48,750 and where they're placed relative to each other. 180 00:09:48,750 --> 00:09:50,400 The final thing I wanted to mention 181 00:09:50,400 --> 00:09:53,910 is that padding and margin, 182 00:09:53,910 --> 00:09:57,990 similar to what we saw for the border 183 00:09:57,990 --> 00:10:00,750 and also the border-width, 184 00:10:00,750 --> 00:10:02,610 function in that same way, 185 00:10:02,610 --> 00:10:07,610 where we've got 1, 2, 3, and 4 values that we can provide. 186 00:10:09,150 --> 00:10:12,660 And if we provide a different value for each of them, 187 00:10:12,660 --> 00:10:17,130 so 0, 10, 20, and 30 pixels, 188 00:10:17,130 --> 00:10:22,130 then this will determine how it looks on all four sides. 189 00:10:22,800 --> 00:10:24,090 And you have to remember 190 00:10:24,090 --> 00:10:28,350 that this is where the first value is, second, 191 00:10:28,350 --> 00:10:32,220 and it goes around in a clockwise direction. 192 00:10:32,220 --> 00:10:33,930 Again, with the border width, 193 00:10:33,930 --> 00:10:37,560 you can change to only provide two values, 194 00:10:37,560 --> 00:10:41,310 so say 10 pixels and 40 pixels. 195 00:10:41,310 --> 00:10:46,310 Then this is going to be applied to the top and the bottom, 196 00:10:46,380 --> 00:10:50,010 and also the left and the right. 197 00:10:50,010 --> 00:10:52,170 So this is just a particular way 198 00:10:52,170 --> 00:10:57,170 of how these three properties can accept multiple values. 199 00:10:58,110 --> 00:11:01,470 If you only set one value, say 10 pixels, 200 00:11:01,470 --> 00:11:05,160 then that's going to affect all sides. 201 00:11:05,160 --> 00:11:09,150 In addition to the boxes that are created by elements, 202 00:11:09,150 --> 00:11:13,410 we can actually create our own boxes independent of that. 203 00:11:13,410 --> 00:11:14,730 And that's really useful 204 00:11:14,730 --> 00:11:18,300 when we want to group different bits of content together, 205 00:11:18,300 --> 00:11:20,010 so that we can style it together 206 00:11:20,010 --> 00:11:22,410 or maybe we want to lay it out together. 207 00:11:22,410 --> 00:11:25,290 For example, here we have an image, 208 00:11:25,290 --> 00:11:29,820 and maybe I would want the image to have a caption, 209 00:11:29,820 --> 00:11:34,020 and I would probably want to style these two bits together 210 00:11:34,020 --> 00:11:38,700 so I can wrap a box around these two elements. 211 00:11:38,700 --> 00:11:42,270 And the way that I would create these artificial boxes 212 00:11:42,270 --> 00:11:45,840 is through the use of a HTML element, 213 00:11:45,840 --> 00:11:49,110 which is called the Content Division element. 214 00:11:49,110 --> 00:11:50,250 There was no point learning 215 00:11:50,250 --> 00:11:54,030 about the div element before we could learn about CSS 216 00:11:54,030 --> 00:11:57,570 because these are completely invisible, 217 00:11:57,570 --> 00:12:00,960 unless you apply CSS style to it. 218 00:12:00,960 --> 00:12:05,960 And the whole purpose is to act as an invisible box 219 00:12:06,060 --> 00:12:08,370 that can contain content 220 00:12:08,370 --> 00:12:12,600 in between the opening and the closing tags. 221 00:12:12,600 --> 00:12:17,250 In the middle, we can put as many elements as we want, 222 00:12:17,250 --> 00:12:21,603 and we can group them into separate boxes known as divs. 223 00:12:22,830 --> 00:12:25,410 So here, I've got the HTML code 224 00:12:25,410 --> 00:12:27,690 from that website I showed you earlier 225 00:12:27,690 --> 00:12:30,750 with the two versions of our world, 226 00:12:30,750 --> 00:12:33,000 the morning and the evening view. 227 00:12:33,000 --> 00:12:34,470 And it's really simple, 228 00:12:34,470 --> 00:12:38,970 and I've only just taken the body section of the HTML. 229 00:12:38,970 --> 00:12:42,300 But here, notice that we've got a paragraph tag 230 00:12:42,300 --> 00:12:43,740 and an image tag, 231 00:12:43,740 --> 00:12:45,360 and they're grouped together 232 00:12:45,360 --> 00:12:48,180 through the use of this div element. 233 00:12:48,180 --> 00:12:49,950 And notice that the div element 234 00:12:49,950 --> 00:12:51,630 doesn't really do anything else, 235 00:12:51,630 --> 00:12:56,630 other than act as a container to group this section together 236 00:12:57,960 --> 00:13:00,810 so that it's separated from other content, 237 00:13:00,810 --> 00:13:03,213 for example this section right here. 238 00:13:04,356 --> 00:13:08,520 And now, we've not only added meaning to our HTML 239 00:13:08,520 --> 00:13:10,950 by saying, "This is one section of content 240 00:13:10,950 --> 00:13:13,170 and this is another section of content," 241 00:13:13,170 --> 00:13:17,013 but in addition, we can style them differently in CSS. 242 00:13:18,000 --> 00:13:19,290 When we run our code, 243 00:13:19,290 --> 00:13:21,450 this is what the website would look like. 244 00:13:21,450 --> 00:13:25,200 You would not see any of these div elements, 245 00:13:25,200 --> 00:13:27,750 but if we were able to see them, 246 00:13:27,750 --> 00:13:29,760 then they would look like this, 247 00:13:29,760 --> 00:13:31,923 grouping our elements together. 248 00:13:33,030 --> 00:13:35,100 Because these divs are invisible, 249 00:13:35,100 --> 00:13:37,740 sometimes it can be really hard to debug them 250 00:13:37,740 --> 00:13:39,690 and understand what's going on 251 00:13:39,690 --> 00:13:43,200 or more likely what's going wrong with your CSS. 252 00:13:43,200 --> 00:13:45,540 So there's a free Chrome extension 253 00:13:45,540 --> 00:13:48,090 that I recommend you download 254 00:13:48,090 --> 00:13:52,020 to make this process of debugging a little bit easier, 255 00:13:52,020 --> 00:13:54,780 and hence that's why it's called Pesticide. 256 00:13:54,780 --> 00:13:58,290 We're gonna use it to get rid of bugs in our CSS. 257 00:13:58,290 --> 00:14:01,920 I'll add a link to this Chrome extension, 258 00:14:01,920 --> 00:14:04,710 and all you have to do is click Add to Chrome 259 00:14:04,710 --> 00:14:06,720 and then Add extension. 260 00:14:06,720 --> 00:14:08,130 And once you've got it, 261 00:14:08,130 --> 00:14:11,310 then you should be able to look inside your extensions 262 00:14:11,310 --> 00:14:14,670 and then open it up to activate it. 263 00:14:14,670 --> 00:14:16,020 Now, what does it do? 264 00:14:16,020 --> 00:14:17,610 Well, let's demo it. 265 00:14:17,610 --> 00:14:20,610 In addition to the suite of Developer Tools you've got, 266 00:14:20,610 --> 00:14:24,600 now you've also got the Pesticide working for you. 267 00:14:24,600 --> 00:14:26,130 And once you activate it, 268 00:14:26,130 --> 00:14:31,130 you can see these div boxes now show up on screen, 269 00:14:31,440 --> 00:14:34,110 and you can also see the different elements 270 00:14:34,110 --> 00:14:36,300 highlighted in boxes. 271 00:14:36,300 --> 00:14:38,340 And it really helps you diagnose what's wrong 272 00:14:38,340 --> 00:14:41,040 with your box model when it does go wrong. 273 00:14:41,040 --> 00:14:43,950 In addition, if you close down the Chrome Developer Tools 274 00:14:43,950 --> 00:14:45,990 and hold down the Control key, 275 00:14:45,990 --> 00:14:48,720 when you hover on each of these boxes, 276 00:14:48,720 --> 00:14:50,520 down at the bottom of the screen, 277 00:14:50,520 --> 00:14:54,030 you can see how it tells you which node 278 00:14:54,030 --> 00:14:55,380 you are actually hovering on. 279 00:14:55,380 --> 00:14:57,960 So in this case, I'm inside a div, 280 00:14:57,960 --> 00:15:00,150 and it shows you if there are any classes 281 00:15:00,150 --> 00:15:02,400 or IDs on that div as well. 282 00:15:02,400 --> 00:15:05,370 And then here, I'm hovering on an image element, 283 00:15:05,370 --> 00:15:08,580 and here I'm hovering on a paragraph element. 284 00:15:08,580 --> 00:15:10,620 And this can be really helpful 285 00:15:10,620 --> 00:15:13,380 for you to see exactly what's on screen 286 00:15:13,380 --> 00:15:15,870 and almost like put on night vision goggles, 287 00:15:15,870 --> 00:15:18,630 so that we can see our divs, and our elements, 288 00:15:18,630 --> 00:15:20,823 and their alignment, and their sizing. 289 00:15:21,720 --> 00:15:24,060 Finally, we're gonna use everything that we've learned 290 00:15:24,060 --> 00:15:27,240 and put it all together in this exercise. 291 00:15:27,240 --> 00:15:30,330 We're gonna write some code and apply our knowledge. 292 00:15:30,330 --> 00:15:32,370 Go ahead and download this ZIP file 293 00:15:32,370 --> 00:15:33,960 from this current lesson, 294 00:15:33,960 --> 00:15:37,830 extract it, and open it inside VS Code. 295 00:15:37,830 --> 00:15:41,460 Now, once you've done that, open up the index.html, 296 00:15:41,460 --> 00:15:44,190 and you should see a bunch of to-dos. 297 00:15:44,190 --> 00:15:47,070 I want you to follow each of the steps one by one 298 00:15:47,070 --> 00:15:49,920 just as if you were a web developer 299 00:15:49,920 --> 00:15:51,990 following client instructions. 300 00:15:51,990 --> 00:15:54,900 And we're going to use everything you've learned so far 301 00:15:54,900 --> 00:15:58,080 in order to create something that looks like this. 302 00:15:58,080 --> 00:16:00,240 Now, I've marked up this page a little bit, 303 00:16:00,240 --> 00:16:03,600 so I can show you the important parts of the requirements. 304 00:16:03,600 --> 00:16:07,950 For example, notice that here I've said 20-pixel padding, 305 00:16:07,950 --> 00:16:10,410 and that applies to the distance 306 00:16:10,410 --> 00:16:14,820 between that paragraph tag and the border. 307 00:16:14,820 --> 00:16:17,910 And then here, I've said it should have a 20-pixel border 308 00:16:17,910 --> 00:16:19,980 at the top and at the bottom, 309 00:16:19,980 --> 00:16:23,970 but then only a 10-pixel border on the left and the right. 310 00:16:23,970 --> 00:16:27,450 And notice that the layout is very specific here. 311 00:16:27,450 --> 00:16:31,530 Each of these boxes should be touching corner to corner. 312 00:16:31,530 --> 00:16:32,730 So you're gonna have to figure out 313 00:16:32,730 --> 00:16:34,800 how to use the margin property 314 00:16:34,800 --> 00:16:37,680 in order to push these boxes around, 315 00:16:37,680 --> 00:16:39,540 so that they're literally aligned 316 00:16:39,540 --> 00:16:42,960 right up to each other on the same pixel. 317 00:16:42,960 --> 00:16:45,330 I'm gonna leave you to pause the video 318 00:16:45,330 --> 00:16:49,110 and go through each of these requirements. 319 00:16:49,110 --> 00:16:51,990 And hopefully you would be able to create a website 320 00:16:51,990 --> 00:16:55,020 that looks like the goal image. 321 00:16:55,020 --> 00:16:58,803 Pause the video now and complete this challenge. 322 00:17:01,470 --> 00:17:04,500 All right, so let's go through the solution together. 323 00:17:04,500 --> 00:17:06,030 Now, the first thing you'll notice 324 00:17:06,030 --> 00:17:08,880 is we've created three divs, 325 00:17:08,880 --> 00:17:13,560 and I've added a paragraph tag into the first div, 326 00:17:13,560 --> 00:17:17,010 so that we can see our padding a bit more easily. 327 00:17:17,010 --> 00:17:18,630 The next thing is we've set 328 00:17:18,630 --> 00:17:22,020 each of the div's height and width to a pixel size, 329 00:17:22,020 --> 00:17:24,270 namely 200 pixels. 330 00:17:24,270 --> 00:17:28,740 Next, I've added a paragraph element inside the first div, 331 00:17:28,740 --> 00:17:33,240 so that we can see any padding that gets added very easily. 332 00:17:33,240 --> 00:17:34,710 And I've set the first div 333 00:17:34,710 --> 00:17:37,320 to have 20 pixels of padding all around 334 00:17:37,320 --> 00:17:40,170 with a black 10-pixel border, 335 00:17:40,170 --> 00:17:43,230 and that you can see under here. 336 00:17:43,230 --> 00:17:45,720 Now, notice how I've used different IDs 337 00:17:45,720 --> 00:17:48,980 for the different boxes or divs, 338 00:17:48,980 --> 00:17:52,380 and this way I can uniquely identify each div 339 00:17:52,380 --> 00:17:54,423 and set different styling to them. 340 00:17:55,830 --> 00:17:58,800 Next step, I've targeted the paragraph element, 341 00:17:58,800 --> 00:18:02,640 so that I remove any of the margins that go on it 342 00:18:02,640 --> 00:18:05,880 because if we preview our solution 343 00:18:05,880 --> 00:18:08,940 and open this up inside Chrome, 344 00:18:08,940 --> 00:18:11,400 you can see that by default, 345 00:18:11,400 --> 00:18:16,400 each paragraph element actually gets one em of margin 346 00:18:16,590 --> 00:18:17,880 at the start and the end. 347 00:18:17,880 --> 00:18:19,110 So if I cancel this, 348 00:18:19,110 --> 00:18:23,940 you can see how it pushes that away from the containing div. 349 00:18:23,940 --> 00:18:25,800 So we wanted to add the zero margin 350 00:18:25,800 --> 00:18:27,690 so that we would have it centered 351 00:18:27,690 --> 00:18:31,080 and it would not be affected by its default styling. 352 00:18:31,080 --> 00:18:33,330 Next, we had you set the second div 353 00:18:33,330 --> 00:18:36,240 to have a 20-pixel border, top and bottom, 354 00:18:36,240 --> 00:18:39,510 and 10-pixel border left and right. 355 00:18:39,510 --> 00:18:41,130 And if you remember from the lesson, 356 00:18:41,130 --> 00:18:45,690 this is achieved through that multi-value method 357 00:18:45,690 --> 00:18:46,980 of setting border width. 358 00:18:46,980 --> 00:18:50,280 So the first value is top and bottom, 359 00:18:50,280 --> 00:18:51,360 and then after space, 360 00:18:51,360 --> 00:18:54,120 we have the second value for the left and right. 361 00:18:54,120 --> 00:18:55,800 And even if you hover over this, 362 00:18:55,800 --> 00:18:57,840 usually, VS Code is quite helpful 363 00:18:57,840 --> 00:19:00,540 for pulling up the MDN reference on this 364 00:19:00,540 --> 00:19:02,550 and it tells you how the rules work. 365 00:19:02,550 --> 00:19:03,873 So that's a quick tip. 366 00:19:04,770 --> 00:19:09,180 Finally, we set the third div to have a 10-pixel border, 367 00:19:09,180 --> 00:19:11,460 and I wanted you to set the margins, 368 00:19:11,460 --> 00:19:14,550 so that they would each touch corner to corner. 369 00:19:14,550 --> 00:19:18,120 Now, that could be done either by trial and error. 370 00:19:18,120 --> 00:19:20,370 Alternatively, you can also work it out 371 00:19:20,370 --> 00:19:24,000 because if you think about this first div right here, 372 00:19:24,000 --> 00:19:27,810 it's got a width of 200 pixels. 373 00:19:27,810 --> 00:19:30,240 So this part is 200, 374 00:19:30,240 --> 00:19:31,290 but in addition, 375 00:19:31,290 --> 00:19:35,520 it's also got a border of 10 pixels all around. 376 00:19:35,520 --> 00:19:39,990 So then we have to add 10 and 10 here. 377 00:19:39,990 --> 00:19:42,660 Now, that takes us up to 220, 378 00:19:42,660 --> 00:19:43,680 but in addition, 379 00:19:43,680 --> 00:19:47,190 remember that we added 20 pixels of padding all around. 380 00:19:47,190 --> 00:19:51,240 So then there's 20 here and 20 here. 381 00:19:51,240 --> 00:19:53,010 So then, if we add it all up, 382 00:19:53,010 --> 00:19:57,720 200 plus 20, plus 20, plus 10, 10, 383 00:19:57,720 --> 00:20:00,810 that ends up with 260 pixels. 384 00:20:00,810 --> 00:20:04,650 So then we know that we have to push this second div over 385 00:20:04,650 --> 00:20:06,347 by 260 pixels, 386 00:20:06,347 --> 00:20:10,830 and we can do that using the margin left setting, 387 00:20:10,830 --> 00:20:13,740 which is how we managed to push this box over. 388 00:20:13,740 --> 00:20:14,790 And in a similar way, 389 00:20:14,790 --> 00:20:19,233 we can work out how much to push this third box as well. 390 00:20:20,340 --> 00:20:21,690 I hope this challenge 391 00:20:21,690 --> 00:20:24,660 was sufficiently challenging enough for you, 392 00:20:24,660 --> 00:20:26,010 but don't worry if it's not 393 00:20:26,010 --> 00:20:28,290 'cause there's way more challenging layouts 394 00:20:28,290 --> 00:20:30,720 that are coming up in the rest of the course, 395 00:20:30,720 --> 00:20:34,590 and you're gonna be able to flex your box model muscles 396 00:20:34,590 --> 00:20:37,290 in the coming sections as well. 397 00:20:37,290 --> 00:20:38,730 But once you're ready 398 00:20:38,730 --> 00:20:41,430 and you've reviewed your code and fixed any errors, 399 00:20:41,430 --> 00:20:42,750 head over to the next lesson 400 00:20:42,750 --> 00:20:45,513 where we got the final project for the section.