1
00:00:01,160 --> 00:00:01,720
‫Hey, there.

2
00:00:01,880 --> 00:00:02,600
‫Welcome back.

3
00:00:02,960 --> 00:00:09,230
‫Now in this lecture, let us discuss about Box Mortar, it's pretty important for you to understand

4
00:00:09,230 --> 00:00:09,530
‫this.

5
00:00:10,220 --> 00:00:14,030
‫Everything that we do in common is divided into box.

6
00:00:14,510 --> 00:00:18,050
‫If I jump on this particular example, right click here.

7
00:00:18,060 --> 00:00:19,070
‫Click on Inspect.

8
00:00:19,670 --> 00:00:22,940
‫You can see all of them are some type of box.

9
00:00:23,690 --> 00:00:26,690
‫You can see if you click here, you will see these example.

10
00:00:27,350 --> 00:00:35,420
‫This is a box box one and box two, so all the content that we see are in form of box.

11
00:00:35,690 --> 00:00:42,950
‫So this board is a box, then this device a box inside that we have two box box B, another box B.

12
00:00:43,430 --> 00:00:46,340
‫So that's how the complete structure is designed.

13
00:00:47,000 --> 00:00:49,340
‫But there are a few other things along with this box.

14
00:00:49,760 --> 00:00:55,570
‫So the text we have added it is our content and there is something like padding.

15
00:00:55,580 --> 00:00:57,050
‫Then we have border.

16
00:00:57,290 --> 00:00:58,550
‫Then we have margin.

17
00:00:59,180 --> 00:01:02,660
‫What are these three important things I understood about?

18
00:01:02,750 --> 00:01:05,330
‫OK, this is the content that we added.

19
00:01:05,630 --> 00:01:06,800
‫But what is this?

20
00:01:07,700 --> 00:01:11,290
‫That's where this whole box model concept coming out of a chair.

21
00:01:11,840 --> 00:01:13,850
‫So let me jump on to Notepad now.

22
00:01:14,390 --> 00:01:18,590
‫So here, let me try to describe things through pen and paper, actually.

23
00:01:18,770 --> 00:01:25,430
‫So you can understand more here we have content, which is one of the most important part.

24
00:01:25,490 --> 00:01:30,290
‫Suppose this is our bag and this is the content that we are displaying on our website.

25
00:01:31,480 --> 00:01:34,570
‫So we have content and then we have padding.

26
00:01:37,230 --> 00:01:38,730
‫And then we have border.

27
00:01:40,040 --> 00:01:41,570
‫And then we have margin.

28
00:01:42,820 --> 00:01:44,750
‫OK, so we have one for you, Doug.

29
00:01:44,770 --> 00:01:51,520
‫You have this next and then suppose we have another bag and let me call this as.

30
00:01:53,270 --> 00:01:54,410
‫Next to.

31
00:01:55,490 --> 00:01:58,070
‫We have to be taxed just like this example.

32
00:01:59,630 --> 00:02:04,220
‫I hope you got the idea of a discord out there inside this, we have to be ducks.

33
00:02:05,220 --> 00:02:11,220
‫Now, if I jump back here, the first thing is content, which is exactly the space that we currently

34
00:02:11,220 --> 00:02:11,500
‫have.

35
00:02:12,270 --> 00:02:16,320
‫This is content and then we have something like border.

36
00:02:19,540 --> 00:02:24,220
‫So if I try to display this here, let me try to select this dog and create a border.

37
00:02:32,120 --> 00:02:34,550
‫If I get my card, you can see this is the border.

38
00:02:35,210 --> 00:02:38,120
‫So that means we have some border if we apply.

39
00:02:38,150 --> 00:02:39,590
‫So there is some border.

40
00:02:40,020 --> 00:02:42,740
‫And let me try to add it here.

41
00:02:46,000 --> 00:02:51,430
‫So we got our content here and then we got our border.

42
00:02:51,940 --> 00:02:57,250
‫All that space between border and this content is known as batting.

43
00:02:58,150 --> 00:02:59,380
‫Pretty simple example.

44
00:02:59,380 --> 00:03:01,830
‫I hope you get this in one go.

45
00:03:02,380 --> 00:03:10,390
‫The space between this content and border is actually padding and the space between one element and

46
00:03:10,390 --> 00:03:12,880
‫this second element is margin.

47
00:03:13,240 --> 00:03:15,210
‫So suppose this is our second element.

48
00:03:15,220 --> 00:03:17,860
‫Let me also being this in blue.

49
00:03:18,190 --> 00:03:20,380
‫Suppose this is our second element here.

50
00:03:20,380 --> 00:03:24,430
‫I'm drawing a border actually and the space between them.

51
00:03:26,810 --> 00:03:30,050
‫This space is actually margin.

52
00:03:31,730 --> 00:03:36,500
‫So content is the content that we had, it can be an image, it can be any type of text.

53
00:03:37,530 --> 00:03:42,270
‫And then parting is the space between content and border.

54
00:03:44,260 --> 00:03:50,560
‫And I hope you got the idea about what is border, it's just an outline and you can see content plus

55
00:03:50,560 --> 00:03:57,460
‫parting, then we get about border and then what is margin space between two different elements?

56
00:03:57,880 --> 00:04:03,260
‫So had we had this element, that means space between two boxes, I should say so.

57
00:04:03,350 --> 00:04:04,120
‫Box one.

58
00:04:05,610 --> 00:04:06,570
‫And walks to.

59
00:04:08,510 --> 00:04:12,020
‫This is the simple information about box theory.

60
00:04:12,470 --> 00:04:13,550
‫That's all.

61
00:04:13,700 --> 00:04:18,500
‫You just need to visualize that everything that we see here is Box.

62
00:04:19,010 --> 00:04:24,220
‫Don't worry, we are going to understand this true code, but make sure you visualize this small part.

63
00:04:24,680 --> 00:04:28,640
‫If I get back here, take this simple example we have this content.

64
00:04:28,910 --> 00:04:30,320
‫Then we have some padding.

65
00:04:30,650 --> 00:04:32,030
‫Then we have this border.

66
00:04:32,270 --> 00:04:33,740
‫And then we have this margin.

67
00:04:34,280 --> 00:04:41,210
‫For example, if I had increased the padding, what will happen this this winning, please this whole

68
00:04:41,210 --> 00:04:41,660
‫space?

69
00:04:42,050 --> 00:04:46,040
‫If I increase this margin bottom here, then this space will increase.

70
00:04:46,190 --> 00:04:47,810
‫So this will be moved down.

71
00:04:48,800 --> 00:04:50,140
‫That's how it is going to work.

72
00:04:50,150 --> 00:04:51,860
‫And this is the perfect diagram.

73
00:04:52,610 --> 00:04:58,190
‫We have some content, we have some padding, we have this quarter and then we have this margin that's

74
00:04:58,190 --> 00:04:58,430
‫on.

75
00:04:58,820 --> 00:05:01,790
‫So content is where our image or text is.

76
00:05:02,360 --> 00:05:07,000
‫Now let's take this example through our day as well as through our done.

77
00:05:07,370 --> 00:05:10,730
‫Our currently whole B is a box.

78
00:05:10,730 --> 00:05:13,130
‫That's why it's taking 100 percent off work.

79
00:05:13,880 --> 00:05:19,160
‫Now, if you jump over to the first part, you'll see some extra space on the left side.

80
00:05:20,820 --> 00:05:26,700
‫This extra spaces default margin by our body tag, if you click on body right now, you will see default

81
00:05:26,700 --> 00:05:32,130
‫margin here, aid for top four right bottom as well as left.

82
00:05:32,850 --> 00:05:35,610
‫So we will understand this more as we move forward.

83
00:05:36,040 --> 00:05:40,920
‫I hope you got the concept of adding margin content as well as border.

84
00:05:41,730 --> 00:05:43,350
‫Now we have tested this border, right?

85
00:05:43,710 --> 00:05:48,360
‫Let's try to add some padding, so I'm going to add padding here itself.

86
00:05:49,170 --> 00:05:50,290
‫So we have our border.

87
00:05:50,310 --> 00:05:55,530
‫Let me try to add space between content and border, so I'm going to add padding here.

88
00:05:56,630 --> 00:06:01,100
‫And I'm going to add binding protein, big cell phone, I'll save this one.

89
00:06:01,250 --> 00:06:02,150
‫Get back here.

90
00:06:02,870 --> 00:06:04,430
‫You can see the space change.

91
00:06:04,820 --> 00:06:09,710
‫What I'm going to do is I'm going to add border on the second one so you can see the difference.

92
00:06:10,160 --> 00:06:11,330
‫See if I jump back here.

93
00:06:14,970 --> 00:06:17,700
‫And headed by Add Border to the second one also.

94
00:06:20,840 --> 00:06:27,230
‫So this is the normal default case, and this is the case where we added fighting, so if you jump head

95
00:06:27,230 --> 00:06:33,650
‫on to the back now, you can see the padding is then, then then and then why?

96
00:06:34,130 --> 00:06:36,980
‫Because we are in big sense now.

97
00:06:36,980 --> 00:06:38,420
‫This is shorthand property.

98
00:06:38,420 --> 00:06:44,540
‫Again, we can individually add four left or top four bottom as well as what we are going to discuss.

99
00:06:44,540 --> 00:06:47,390
‫This don't worry about, but understand the concept here.

100
00:06:47,840 --> 00:06:53,480
‫So this is the batting part we now added batting the green thing that you are currently seeing if I

101
00:06:53,480 --> 00:06:56,150
‫jump on the dispute that you don't see any batting.

102
00:06:56,900 --> 00:06:58,760
‫OK, now we understood about batting.

103
00:06:59,150 --> 00:07:05,810
‫And if I select the speed tag by default, the margin is 16 from the top as well as from the bottom.

104
00:07:06,320 --> 00:07:07,310
‫We can change this.

105
00:07:07,310 --> 00:07:09,350
‫Actually see if I jump ahead.

106
00:07:11,140 --> 00:07:12,190
‫And our margin.

107
00:07:14,760 --> 00:07:17,820
‫Let me out 50 pixels, save this one.

108
00:07:18,180 --> 00:07:21,660
‫Get back here now you can see everything has changed.

109
00:07:21,750 --> 00:07:22,230
‫Why?

110
00:07:22,620 --> 00:07:27,350
‫Because padding and margin is attacks on oil before detection.

111
00:07:28,050 --> 00:07:29,600
‫So we have top direction.

112
00:07:29,610 --> 00:07:33,600
‫We have this right direction than we have bottom in left.

113
00:07:34,110 --> 00:07:37,570
‫Usually, we calculate everything in clockwise direction.

114
00:07:37,590 --> 00:07:42,140
‫You will see the rdl and you can call this as gravel had.

115
00:07:42,240 --> 00:07:48,270
‫This propagates itself as I travel, but this name help you to remember everything that prb.

116
00:07:48,660 --> 00:07:54,900
‫These are the four values that we are going to want PRB and again generally hover over this.

117
00:07:55,200 --> 00:08:00,360
‫We have attached 50 at the top, 50 at the right side, then bottom and the left.

118
00:08:00,690 --> 00:08:04,500
‫So that means our added margin outside of my border.

119
00:08:04,980 --> 00:08:06,780
‫You can see the difference here now.

120
00:08:06,780 --> 00:08:08,410
‫It's increased to 50 percent.

121
00:08:08,430 --> 00:08:14,640
‫So the difference between my box and Box B has a gap of 50 percent.

122
00:08:15,630 --> 00:08:16,770
‫So this is important.

123
00:08:17,040 --> 00:08:18,690
‫Let me try to do one more thing.

124
00:08:19,260 --> 00:08:21,900
‫Jump in and add batting.

125
00:08:23,220 --> 00:08:23,880
‫And Brexit.

126
00:08:25,080 --> 00:08:29,460
‫She came back here, things looks fine as expected.

127
00:08:30,300 --> 00:08:31,710
‫We have our guys some batting.

128
00:08:32,610 --> 00:08:35,670
‫But if I add margin asked 50.

129
00:08:38,420 --> 00:08:39,460
‫I haven't seen it.

130
00:08:42,030 --> 00:08:44,430
‫And if I save this now, can I can?

131
00:08:46,260 --> 00:08:48,270
‫You see, they are sharing margin.

132
00:08:49,680 --> 00:08:50,520
‫Look at this.

133
00:08:51,060 --> 00:08:55,140
‫It's 50 again, this is common space now.

134
00:08:55,500 --> 00:08:57,960
‫What happened is Martin can be overlap.

135
00:08:58,410 --> 00:09:02,940
‫That means if there is some space already, the 50 Pixel is already available.

136
00:09:03,150 --> 00:09:04,950
‫We can utilize it now.

137
00:09:05,160 --> 00:09:07,530
‫What I can do is I can add 60 here.

138
00:09:08,740 --> 00:09:15,310
‫And if I saved this one, get back here now you can see this is 60, but for this one, you can see

139
00:09:15,310 --> 00:09:16,870
‫the end of orange line.

140
00:09:17,050 --> 00:09:17,980
‫It is 50.

141
00:09:18,640 --> 00:09:20,140
‫So that's how this is going to work.

142
00:09:20,590 --> 00:09:27,730
‫My main motive with this particular lecture was to make you understand about these three concepts batting

143
00:09:27,940 --> 00:09:29,740
‫border, as well as margin.

144
00:09:30,520 --> 00:09:33,210
‫They require dedicated lectures for their value.

145
00:09:33,220 --> 00:09:34,780
‫We are going to discuss next.

146
00:09:35,230 --> 00:09:38,110
‫But make sure you understand the basic concept.

147
00:09:38,560 --> 00:09:40,690
‫More students find this difficult.

148
00:09:40,990 --> 00:09:46,990
‫I don't know why, but this is one of my favorite topic because you can customize this space that you

149
00:09:46,990 --> 00:09:48,370
‫want with your boxes.

150
00:09:49,120 --> 00:09:54,850
‫Now I will be continuing this topic in the next one, where we will discuss more about these values,

151
00:09:55,150 --> 00:09:56,620
‫as well as that experiment.

152
00:09:57,280 --> 00:09:59,770
‫Thank you for following, and I see you guys in the next one.