1 00:00:05,150 --> 00:00:08,630 Welcome back, everyone, to this lecture on the Castbox box model. 2 00:00:09,620 --> 00:00:15,300 Now, we've seen already that using CSIS, we can specify a border around HTML element. 3 00:00:15,320 --> 00:00:17,390 We can even color and style that border. 4 00:00:18,020 --> 00:00:22,820 Keep in mind, though, this border is actually part of what's known as the CSA box model, which is 5 00:00:22,820 --> 00:00:26,690 a group of edges surrounding the actual HTML element content. 6 00:00:27,900 --> 00:00:30,420 So, for example, let's imagine you have some content. 7 00:00:30,630 --> 00:00:32,250 This would just be the raw text. 8 00:00:32,490 --> 00:00:36,270 For example, if this was a paragraph tag, it could say something like Hello world. 9 00:00:36,600 --> 00:00:40,830 Then around this content, you actually have padding that you can define. 10 00:00:41,400 --> 00:00:44,460 Then after the padding, you have the border. 11 00:00:44,790 --> 00:00:49,830 Last time when we were actually editing things like the border color and maybe the border styling, 12 00:00:50,040 --> 00:00:53,610 we were actually editing this part of the CSE's box model. 13 00:00:53,910 --> 00:00:59,850 Technically speaking, we could have ad spacing between the content and the border by editing the padding 14 00:00:59,850 --> 00:01:01,350 in the CSE's box model. 15 00:01:01,920 --> 00:01:05,850 And there's also what's known as margin beyond the border. 16 00:01:06,180 --> 00:01:07,620 So you have a lot to play with here. 17 00:01:07,630 --> 00:01:13,050 You have the content, the padding between the content and the border and then the margin beyond the 18 00:01:13,050 --> 00:01:13,470 border. 19 00:01:13,830 --> 00:01:19,920 And this is a box model that can then help separate out edges of each HTML elements on the page. 20 00:01:20,430 --> 00:01:24,300 We should also note that they don't have to grow in equal distance in all directions. 21 00:01:24,660 --> 00:01:31,620 You can actually specify the left to right or top to bottom padding border or margin surrounding a piece 22 00:01:31,620 --> 00:01:32,280 of content. 23 00:01:32,850 --> 00:01:36,000 OK, let's check out this box model in Visual Studio code. 24 00:01:36,270 --> 00:01:38,820 All right, here I am inside Visual Studio Code Editor. 25 00:01:39,150 --> 00:01:45,240 As a quick note, you may want to do a quick Google Image search of CSV box model so you can easily 26 00:01:45,240 --> 00:01:46,920 follow along with what I'm referring to. 27 00:01:47,190 --> 00:01:52,440 Main thing to remember is that Echo's content than the padding than the border and then the margin beyond 28 00:01:52,440 --> 00:01:52,890 the border. 29 00:01:53,250 --> 00:01:56,910 OK, so now that we remember that, let's go ahead and create two headings. 30 00:01:57,490 --> 00:02:00,180 Going to create heading one and this is going to say up. 31 00:02:01,670 --> 00:02:04,220 And then I'm going to create another heading, and this one's going to say down. 32 00:02:05,220 --> 00:02:08,610 And then what I'm going to do is I will assign each of these a unique ID. 33 00:02:09,389 --> 00:02:10,680 So this will be up that way. 34 00:02:10,680 --> 00:02:12,060 I can refer to it in the CSIS. 35 00:02:13,260 --> 00:02:18,210 And this idea is going to be equal to them, so we'll say it is equal to them. 36 00:02:19,100 --> 00:02:19,430 All right. 37 00:02:19,640 --> 00:02:24,440 So let's go in and save those changes I have up and down, you already know, is there some spacing 38 00:02:24,440 --> 00:02:25,760 between them, which is kind of interesting. 39 00:02:26,210 --> 00:02:27,890 We'll come back to M. Assess. 40 00:02:29,140 --> 00:02:33,940 And let's grab those IDs, member IDs or hash tags in the CSIS we have up. 41 00:02:34,920 --> 00:02:36,150 And then we also have the. 42 00:02:37,820 --> 00:02:42,980 OK, so we have up and down, and now let's go ahead and begin starting to play with the idea that I 43 00:02:42,980 --> 00:02:48,560 have borders, margins with padding, text alignment, et cetera, to make it clear what's going on. 44 00:02:48,620 --> 00:02:51,380 I'm going to add in some text alignment. 45 00:02:51,830 --> 00:02:56,660 So I'm going to say text align and we're going to set the sequel to center. 46 00:02:56,750 --> 00:02:59,690 So they're going to be centered within their little boxes there. 47 00:03:00,170 --> 00:03:01,290 And I'll do it for both. 48 00:03:01,310 --> 00:03:05,450 That way, it's kind of clear or hopefully more clear what's actually happening. 49 00:03:05,540 --> 00:03:07,750 OK, so we have text align center. 50 00:03:07,810 --> 00:03:13,340 Remember, as I begin to play around with this window, I can see the text alignment stays in place. 51 00:03:13,340 --> 00:03:14,900 It stays at the center of that browser. 52 00:03:15,500 --> 00:03:17,870 Next one I want to do is add in the border. 53 00:03:18,230 --> 00:03:22,490 Remember, I have the content that I'm going to have some padding that I have the border and then I 54 00:03:22,490 --> 00:03:23,750 have the margin beyond the border. 55 00:03:24,260 --> 00:03:26,090 So I'm going to say border. 56 00:03:26,840 --> 00:03:33,650 And you could define border, top border, left border, right with style, color, etc. But there is 57 00:03:33,650 --> 00:03:40,070 this shorthand border, and what the shorthand allows you to do is quickly specify the line with the 58 00:03:40,070 --> 00:03:41,390 line style and the color. 59 00:03:41,510 --> 00:03:44,150 Let me show you an example that I could say something like. 60 00:03:45,140 --> 00:03:45,920 10 pixels. 61 00:03:47,000 --> 00:03:50,870 And then the style will be solid and the color will be red. 62 00:03:51,820 --> 00:03:55,990 And now you can clearly see here I have this solid red 10 pixel border. 63 00:03:56,630 --> 00:04:02,320 Let's go ahead and copy this and do the same thing for the up heading one element, except let's make 64 00:04:02,320 --> 00:04:03,100 it blue this time. 65 00:04:04,250 --> 00:04:11,510 OK, so I have the ability to use the shorthand for border or what I could also do is specify border, 66 00:04:11,510 --> 00:04:13,370 left, border, right, cetera. 67 00:04:13,880 --> 00:04:16,700 And let me show you an example of that with the actual margin. 68 00:04:16,940 --> 00:04:19,760 So what I'm going to do here is on the up element. 69 00:04:20,540 --> 00:04:26,030 I'm going to start playing around with margin, but let's just edit the margin bottom. 70 00:04:26,960 --> 00:04:27,230 So. 71 00:04:27,260 --> 00:04:30,920 Margin bottom is the spacing beyond the border. 72 00:04:31,310 --> 00:04:35,570 So recall, there's some sort of spacing here, and there's actually two margins interactive with each 73 00:04:35,570 --> 00:04:35,840 other. 74 00:04:36,200 --> 00:04:37,940 There's the bottom margin of up. 75 00:04:38,420 --> 00:04:40,610 And then there's the top margin of down. 76 00:04:41,090 --> 00:04:45,770 So if I just want to edit the margin bottom here, I could make it a lot larger. 77 00:04:45,770 --> 00:04:53,750 I could say something like 100 pixels, and you can see it essentially pushes out the box, which leaves 78 00:04:53,750 --> 00:04:56,840 less room for the down box to then begin starting. 79 00:04:57,140 --> 00:05:00,170 So this is how you can then space elements on your page. 80 00:05:00,920 --> 00:05:01,280 OK. 81 00:05:01,610 --> 00:05:07,040 So if I wanted to maybe add more margin to the left, I could say. 82 00:05:08,080 --> 00:05:09,010 Margin left. 83 00:05:10,170 --> 00:05:15,150 And at 100 pixels of margin there, you can start to see it's going to end up getting spaced out more 84 00:05:15,150 --> 00:05:15,630 and more. 85 00:05:15,960 --> 00:05:20,880 And you should take into account the fact that I'm kind of zoomed in here so your effects may not look 86 00:05:20,880 --> 00:05:21,960 exactly the same as mine. 87 00:05:22,350 --> 00:05:26,010 And also your effects are going to be different depending on your sizing here. 88 00:05:26,100 --> 00:05:29,130 But this will also let you know what is actually taking effect. 89 00:05:29,430 --> 00:05:31,530 You can see that marginal left in that margin bottom. 90 00:05:31,830 --> 00:05:35,820 No matter what I do, as far as stretching this out, there's always going to be that margin there, 91 00:05:35,820 --> 00:05:39,000 or at least an attempt on margin, depending on how small this thing can go. 92 00:05:39,720 --> 00:05:46,920 OK, so now we understand from the outside we have that margin, then we have the actual border. 93 00:05:47,280 --> 00:05:49,320 And the last thing to discover is the padding. 94 00:05:49,620 --> 00:05:54,630 Remember, the padding is a space between the content that is the texture and the actual border. 95 00:05:55,020 --> 00:06:01,050 So for example, if I wanted just space between down and, let's say, at the top of that border, I 96 00:06:01,050 --> 00:06:02,070 could say padding. 97 00:06:03,350 --> 00:06:04,820 And let's say patting top. 98 00:06:06,350 --> 00:06:10,610 And again, let's add in some padding here, so I can say, let's say, 20 pixels of padding. 99 00:06:11,480 --> 00:06:14,510 Between the text here and the actual border. 100 00:06:14,930 --> 00:06:20,750 So this is going to allow you to begin to play around with the location of the text and the elements 101 00:06:20,750 --> 00:06:22,190 within the borders themselves. 102 00:06:22,790 --> 00:06:24,890 So those are the main factors. 103 00:06:24,920 --> 00:06:26,930 Again, it's going to be starting. 104 00:06:26,930 --> 00:06:31,910 If you're content like up and down text, then you have padding available to you. 105 00:06:32,300 --> 00:06:33,770 And there are shorthand for this. 106 00:06:33,770 --> 00:06:39,020 But if you don't want the shorthand, you can just say padding top left, bottom right. 107 00:06:39,620 --> 00:06:42,800 Then you have the border itself as well. 108 00:06:42,860 --> 00:06:44,360 And then you have the margin. 109 00:06:45,910 --> 00:06:50,140 And in the same way, the border had the shorthand padding and margin also have those shorthand hands. 110 00:06:50,440 --> 00:06:52,240 So if you really want it to, you can come back here. 111 00:06:52,750 --> 00:06:56,320 The margin left and margin bottom and just do something like this. 112 00:06:56,320 --> 00:07:03,580 You could say margin and then say something like 20 pixels, 20 pixels, 100 pixels, 10 pixels or something 113 00:07:03,580 --> 00:07:04,060 like that. 114 00:07:04,330 --> 00:07:07,470 And you can see the margin started to be affected again and kind of zoomed in here. 115 00:07:07,480 --> 00:07:11,500 So you may not see it as pronounced if you really want to see start zooming out. 116 00:07:11,770 --> 00:07:12,760 But you get the idea. 117 00:07:13,540 --> 00:07:16,210 So that's pretty much it for the CIUSSS box model. 118 00:07:16,240 --> 00:07:22,060 It's just a little bit of extra code there in case you ever find yourself trying to figure things on 119 00:07:22,060 --> 00:07:25,090 the page or reconfigure things on the page so that they look a little nicer. 120 00:07:25,120 --> 00:07:30,250 You have those tools available for you in the process of padding, border and margin. 121 00:07:30,580 --> 00:07:30,880 OK. 122 00:07:31,030 --> 00:07:31,390 That's it. 123 00:07:31,690 --> 00:07:32,620 I'll see you at the next lecture.