1
00:00:00,390 --> 00:00:01,240
Welcome back.

2
00:00:01,650 --> 00:00:08,130
In this video, I want to talk about the box model, and it's a very important concept and it's something

3
00:00:08,130 --> 00:00:13,680
that you might have been kind of curious in the back of your head about, and that is this image right

4
00:00:13,680 --> 00:00:14,010
here.

5
00:00:15,050 --> 00:00:19,910
In case we have this idea of the box model which has the content.

6
00:00:21,110 --> 00:00:26,720
It has the padding the border, which we've seen before, and then the margin, so we're going to talk

7
00:00:26,720 --> 00:00:27,740
about that in this video.

8
00:00:27,980 --> 00:00:34,970
So we have are not so pretty website right now, but I have left intentionally our login page still

9
00:00:34,970 --> 00:00:35,990
kind of blank.

10
00:00:36,560 --> 00:00:41,420
And you see that there's no styles apply to it, because if we go to the login page, I'm going to drag

11
00:00:41,420 --> 00:00:42,110
it over here.

12
00:00:42,320 --> 00:00:47,210
It's referencing style, too, which doesn't have much styles happening.

13
00:00:47,210 --> 00:00:54,590
To really emphasize this point, I wanted to just instead of the lorem ipsum, I'm going to create a

14
00:00:54,890 --> 00:00:59,390
div if I give this a class of.

15
00:01:00,870 --> 00:01:09,570
Box model, I can go into my style to which I'm going to drag over here and I can say box model.

16
00:01:11,280 --> 00:01:11,930
Border.

17
00:01:13,680 --> 00:01:17,250
Five pixels, solid red, I save this and refresh.

18
00:01:18,260 --> 00:01:22,040
OK, so we have our box model, let's add something into this div.

19
00:01:23,540 --> 00:01:30,110
We have a and right now it's covering the entire space, but if we add three more.

20
00:01:34,040 --> 00:01:35,360
We'll call this one the.

21
00:01:36,280 --> 00:01:38,980
The next one, see, I save and refresh.

22
00:01:39,840 --> 00:01:48,460
OK, we have these, and if we wanted them all in one line, then you might remember that that was display

23
00:01:49,270 --> 00:01:50,350
in line block.

24
00:01:51,040 --> 00:01:52,660
And I save refresh.

25
00:01:53,780 --> 00:01:54,650
There we have it.

26
00:01:55,220 --> 00:01:57,050
OK, let's talk about the box model here.

27
00:01:57,290 --> 00:02:01,220
Let's say we wanted more space inside of these for the letters.

28
00:02:02,090 --> 00:02:04,070
Well, in that case, we can use something like padding.

29
00:02:04,580 --> 00:02:07,190
So padding, I can put 20 pixels.

30
00:02:08,160 --> 00:02:15,330
Save and refresh, and there's our padding, but let's say we wanted different padding so that the sides

31
00:02:15,570 --> 00:02:17,280
are wider than the top.

32
00:02:18,250 --> 00:02:26,770
In that case, we can do something like five pixels at the top, 20 pixels on the right side, five

33
00:02:26,770 --> 00:02:32,080
pixels at the bottom and 20 pixels to the left eye refresh.

34
00:02:33,580 --> 00:02:39,640
And look at that, and that's just the standard that you'll have to get used to its top right, bottom

35
00:02:39,850 --> 00:02:40,330
left.

36
00:02:40,390 --> 00:02:46,950
You can also actually do padding, as you can see in the dropped on bottom left, top right to specify.

37
00:02:47,380 --> 00:02:49,150
But this is a quicker way of doing it.

38
00:02:49,270 --> 00:02:52,330
If you remember, there was one more and that was margin.

39
00:02:53,080 --> 00:02:58,120
So margin allows us to create space outside of the border.

40
00:02:59,190 --> 00:03:03,180
So if I go 20 pixels here and I save refresh.

41
00:03:04,490 --> 00:03:10,750
You can see that we created 20 pixels on the left side and right side, but also the top and the bottom,

42
00:03:10,760 --> 00:03:16,050
let's say we only want spaces between the boxes, but not at the top and bottom.

43
00:03:16,440 --> 00:03:17,810
Well, same principle.

44
00:03:17,810 --> 00:03:21,740
Again, we can do zero pixels, 20 pixels.

45
00:03:23,260 --> 00:03:30,380
Zero pixels and 20 pixels, so top right, bottom left, save and refresh.

46
00:03:31,300 --> 00:03:31,840
There you go.

47
00:03:32,230 --> 00:03:34,450
Now, this might get tedious.

48
00:03:34,480 --> 00:03:39,460
There is one other shorthand way, and that is you can remove this.

49
00:03:39,490 --> 00:03:41,350
So this means top and bottom.

50
00:03:41,950 --> 00:03:43,170
This means left and right.

51
00:03:43,570 --> 00:03:44,850
I save this and refresh.

52
00:03:45,160 --> 00:03:46,900
Nothing should change and it doesn't.

53
00:03:47,170 --> 00:03:49,510
And we can do the same at the top here as well.

54
00:03:52,910 --> 00:03:53,400
Perfect.

55
00:03:53,780 --> 00:04:00,200
One last thing I want to show you is that if we open up our developer tools, so again, we do inspect.

56
00:04:01,320 --> 00:04:08,910
You'll see in our styles that we have our box model, so if you see over here, we have our content,

57
00:04:09,810 --> 00:04:14,510
we have our padding and it says 20 pixels, five pixels, five pixels.

58
00:04:15,150 --> 00:04:16,260
We have our border.

59
00:04:17,420 --> 00:04:23,720
Five pixels, five pixels, five pixel, five pixels, and then our margin zero with 20 on the side.

60
00:04:24,530 --> 00:04:31,160
So again, Chrome allows you to browse around and make sure that all of these are properly done.

61
00:04:31,430 --> 00:04:34,170
The last thing you might ask is, what about this content?

62
00:04:34,190 --> 00:04:36,080
How can I change this?

63
00:04:36,470 --> 00:04:37,880
And that's very simple.

64
00:04:37,880 --> 00:04:47,330
You can do something like with this two thirty three pixels, save and refresh and also do height.

65
00:04:48,850 --> 00:04:52,270
Do 55 pixels save and refresh?

66
00:04:53,280 --> 00:04:59,490
And you'll see over here that in our box model, we now have the content with thirty three pixels by

67
00:04:59,490 --> 00:05:00,510
fifty five pixels.

68
00:05:01,870 --> 00:05:03,520
All right, that's it for now.

69
00:05:03,640 --> 00:05:04,540
See you in the next one.

70
00:05:04,810 --> 00:05:05,190
Bye bye.