1
00:00:01,160 --> 00:00:06,880
Let's finish up with the box model concepts by talking about what is called margin.

2
00:00:06,890 --> 00:00:12,410
So what is margin property when it comes to box model?

3
00:00:12,590 --> 00:00:20,090
So margin property are space between a box and the contents of the next element.

4
00:00:20,390 --> 00:00:29,000
So it simply means that it's a space between children or two or more children that is around a particular

5
00:00:29,000 --> 00:00:29,780
element.

6
00:00:30,110 --> 00:00:36,260
So if we see that, how many elements do we have on this particular page?

7
00:00:36,500 --> 00:00:37,490
Can you tell me?

8
00:00:37,580 --> 00:00:39,650
We have what is called.

9
00:00:39,680 --> 00:00:42,250
The first one is here with the eighth one where com.

10
00:00:42,290 --> 00:00:45,830
And this text number two and the whole of this one.

11
00:00:45,890 --> 00:00:51,650
Number three and I have this pan number four and we have this one as number five.

12
00:00:52,340 --> 00:01:00,350
And we see that for the element number three, which is this one, there is no space here.

13
00:01:00,500 --> 00:01:07,640
So the spacing between this child and then the next child is what you call the margin.

14
00:01:08,000 --> 00:01:13,570
We see that the mind, the surrounding contents of an element is called the margin.

15
00:01:13,580 --> 00:01:20,510
So let's say I want to have some margin around between this particular child and this particular child

16
00:01:20,510 --> 00:01:24,470
and apply margin on this particular child.

17
00:01:25,050 --> 00:01:29,720
The same thing on this pan is that for this PAN, we don't have margin around that.

18
00:01:29,720 --> 00:01:33,100
So let's see how we can apply margin also.

19
00:01:33,110 --> 00:01:38,810
So margin also has four properties, margin top, bottom left or right.

20
00:01:38,810 --> 00:01:39,680
So let's see.

21
00:01:39,800 --> 00:01:47,540
So let's add a margin to the first one, each one here, which is this one, my h one here, this.

22
00:01:47,660 --> 00:01:50,570
So come up here, this is my h one here.

23
00:01:50,570 --> 00:01:55,640
So I will select that then having selected and C margin.

24
00:01:56,580 --> 00:01:58,710
Of, say, 20 paychecks.

25
00:01:59,580 --> 00:02:08,190
And we see that as soon as I add that I have a margin around that, but I don't want to have a margin

26
00:02:08,190 --> 00:02:09,690
on all on all sides.

27
00:02:09,789 --> 00:02:11,220
See that at the top here.

28
00:02:11,220 --> 00:02:12,630
I want to add a margin.

29
00:02:12,630 --> 00:02:17,130
You see that as soon as I add margin, I have some space at the top.

30
00:02:19,050 --> 00:02:21,930
Left, bottom and right.

31
00:02:22,050 --> 00:02:22,810
I don't want that.

32
00:02:22,850 --> 00:02:29,040
What about if I want to have margin at the top, then specify as margin.

33
00:02:29,920 --> 00:02:31,540
Bottom sorry, margin bottom.

34
00:02:31,550 --> 00:02:33,370
What is if I save it now?

35
00:02:33,370 --> 00:02:34,930
See that now I have margin.

36
00:02:35,890 --> 00:02:41,650
That is between this particular element, this child and this particular tag here.

37
00:02:41,680 --> 00:02:42,910
Now, perfect.

38
00:02:43,600 --> 00:02:49,570
So you would have some margin to to decide why not we can do that using margin.

39
00:02:50,110 --> 00:02:53,140
Margin left and error margin left.

40
00:02:53,140 --> 00:02:57,190
And then going to be as ten parsecs now half margin.

41
00:02:57,430 --> 00:03:02,110
What about this particular I mean, particular dip here?

42
00:03:02,140 --> 00:03:03,130
That is a border.

43
00:03:03,130 --> 00:03:08,000
The dip this might dip here so I can come down here and say.

44
00:03:08,020 --> 00:03:13,780
Margin we see for one element we can add as many states property that we want.

45
00:03:14,110 --> 00:03:19,780
I can say margin on all the sides is supposed to be 20 parsecs.

46
00:03:19,900 --> 00:03:22,270
Now I have enough margin.

47
00:03:22,270 --> 00:03:24,790
I want this one perfectly aligned.

48
00:03:25,030 --> 00:03:26,710
What about my span here?

49
00:03:27,430 --> 00:03:34,960
Okay, so for this pan to I can come down here now have my span been selected or is my span here?

50
00:03:35,260 --> 00:03:35,980
I can.

51
00:03:35,980 --> 00:03:41,470
I had also margin on all sides to be 20 parsecs.

52
00:03:42,010 --> 00:03:44,170
Now I have it.

53
00:03:45,040 --> 00:03:45,300
Okay.

54
00:03:45,400 --> 00:03:46,450
I have that one.

55
00:03:46,690 --> 00:03:47,520
That is it.

56
00:03:47,530 --> 00:03:49,650
So that's the beauty of margin.

57
00:03:49,660 --> 00:03:53,320
Margin, the space between a child and a nervous child.

58
00:03:54,100 --> 00:03:56,110
And putting it within the child.

59
00:03:56,110 --> 00:04:02,320
But the space between the border and the content and the way it specified the horizontal and vertical

60
00:04:02,320 --> 00:04:06,470
sizes of a box, that is it about box model.

61
00:04:06,490 --> 00:04:14,350
So with this concept in mind, the next video let's improve our skills by learning what is called CSS

62
00:04:14,350 --> 00:04:15,370
selectors.