1
00:00:00,990 --> 00:00:01,490
‫Hey, there.

2
00:00:01,680 --> 00:00:06,060
‫Welcome back in this lecture, let us discuss Ammo box sizing.

3
00:00:07,060 --> 00:00:12,760
‫This topic is related to Biden margin, as well as the content that we are currently learning about.

4
00:00:13,570 --> 00:00:21,910
‫So if I jump back here and if I jump on to our box, the word that currently we have is different than

5
00:00:21,910 --> 00:00:23,100
‫we are visualizing.

6
00:00:23,450 --> 00:00:32,560
‫OK, what I mean by this complicated, I suppose our current content rate is 300 pixel, but the total

7
00:00:32,560 --> 00:00:36,820
‫element to it will be content less padding, less border.

8
00:00:37,600 --> 00:00:40,660
‫Let's visualize this in terms of code.

9
00:00:41,290 --> 00:00:45,640
‫For example, if I take with fixed rate born out of first box.

10
00:00:47,350 --> 00:00:51,910
‫And I keep this weight as 200 pixels, save this one.

11
00:00:52,360 --> 00:00:53,200
‫Get back here.

12
00:00:55,000 --> 00:00:57,270
‫So this should be 200 bucks, right?

13
00:00:57,370 --> 00:00:58,570
‫The element to it.

14
00:00:58,900 --> 00:01:02,950
‫No element of it is calculated in default.

15
00:01:03,280 --> 00:01:11,770
‫In default HDMI dom element, which is calculated, are the box where it is calculated by understanding

16
00:01:11,770 --> 00:01:16,710
‫the content plus padding plus border.

17
00:01:17,440 --> 00:01:25,300
‫At this point of time, we need to add this 200 pixel plus this 20 pixel general lieutenant, right?

18
00:01:25,750 --> 00:01:29,500
‫And then this war Pixel two XL left and dawn right.

19
00:01:30,070 --> 00:01:33,220
‫So this is going to be 224 pixel.

20
00:01:35,020 --> 00:01:39,790
‫Similarly, the hide will be different at currently the quantum hiatus for physics.

21
00:01:40,390 --> 00:01:44,380
‫So then we need to add this jaunty top and bottom and then this pole.

22
00:01:44,680 --> 00:01:45,690
‫So this will change.

23
00:01:45,710 --> 00:01:46,930
‫It will be at the.

24
00:01:47,980 --> 00:01:49,510
‫You need to understand this point.

25
00:01:49,720 --> 00:01:54,850
‫By default, the book sizing is equal to content box.

26
00:01:55,180 --> 00:02:00,730
‫So there is a property by default with our B dog, with our HDMI dog.

27
00:02:00,910 --> 00:02:03,550
‫And by default it is content box.

28
00:02:04,330 --> 00:02:05,410
‫Let me write this here.

29
00:02:06,040 --> 00:02:07,210
‫This will help you a lot.

30
00:02:08,050 --> 00:02:14,140
‫So we call this ice box dad's sizing and there are two parts.

31
00:02:14,320 --> 00:02:20,740
‫The first part is about container box and the second part is about more than a box.

32
00:02:23,490 --> 00:02:29,910
‫In Box, which is the default setting, we're equals to content plus padding.

33
00:02:30,540 --> 00:02:31,290
‫Plus border.

34
00:02:32,630 --> 00:02:39,480
‫But with Voltabox, which will request to the content that we have provided, so that provided with.

35
00:02:40,810 --> 00:02:46,360
‫And it really just among these three, so suppose currently our content, which was 200.

36
00:02:46,610 --> 00:02:52,300
‫So let's take this as 200 and then this was 20 and then this was four.

37
00:02:52,960 --> 00:02:56,320
‫But in this case, what will happen is this is going to remain same.

38
00:02:56,770 --> 00:03:04,990
‫But the extra extra 24 will be decreased from this, so it will be 176 plus 20 plus.

39
00:03:04,990 --> 00:03:07,480
‫Or let me give you an example.

40
00:03:07,870 --> 00:03:09,400
‫And currently we have.

41
00:03:11,660 --> 00:03:15,560
‫By default, this box sizing as content box.

42
00:03:15,950 --> 00:03:17,850
‫But let me just try to change this one.

43
00:03:17,870 --> 00:03:23,120
‫Let me try to use this box sizing and change this to board a box if I save this one.

44
00:03:23,570 --> 00:03:28,720
‫And let me try to copy as it is with this one, so you can see the difference in both.

45
00:03:29,190 --> 00:03:29,950
‫Save this one.

46
00:03:29,970 --> 00:03:30,830
‫Get back here.

47
00:03:31,670 --> 00:03:34,620
‫Hey, you can see these two sizes are different.

48
00:03:34,640 --> 00:03:35,600
‫Let me close this one.

49
00:03:35,870 --> 00:03:39,650
‫So this is with Border Box and this one is with content box.

50
00:03:42,290 --> 00:03:46,460
‫Border box means everything will be inside this 200 pixel.

51
00:03:46,490 --> 00:03:51,110
‫Whatever the weight we have provided, but content box means.

52
00:03:52,560 --> 00:03:59,340
‫We can increase this extra padding space, we can increase this extra border space here, 200 plus 20

53
00:03:59,340 --> 00:04:00,060
‫plus food.

54
00:04:00,450 --> 00:04:06,240
‫But if I select the fast one, it is going to be 176 plus 20 plus four.

55
00:04:06,690 --> 00:04:07,980
‫That's how it is going to work.

56
00:04:08,460 --> 00:04:15,180
‫So all you have to remember is, in simple words, counting boxes, stretchable various border box is

57
00:04:15,180 --> 00:04:15,660
‫fixed.

58
00:04:16,230 --> 00:04:19,300
‫And this is important when you are working with the project.

59
00:04:19,320 --> 00:04:21,100
‫We need to understand our layout.

60
00:04:21,150 --> 00:04:22,110
‫It should be fixed.

61
00:04:22,500 --> 00:04:26,550
‫You cannot stretch things outside of the box and you cannot take extra space.

62
00:04:26,910 --> 00:04:32,440
‫If I'm expecting these values, I want you to adjust my content inside automatically.

63
00:04:32,460 --> 00:04:34,950
‫I don't want to stretch and take extra space.

64
00:04:35,400 --> 00:04:37,880
‫So that's why we're utilizing this border box.

65
00:04:38,730 --> 00:04:39,090
‫OK.

66
00:04:39,120 --> 00:04:41,160
‫That said, I hope you got the idea.

67
00:04:41,580 --> 00:04:45,360
‫Now here, if I increase departing, OK, let's play this game.

68
00:04:45,720 --> 00:04:49,470
‫You can actually select the value and change head itself.

69
00:04:49,890 --> 00:04:55,530
‫So if I increase the padding now on my second one, you're going to keep on increasing.

70
00:04:56,160 --> 00:04:58,620
‫And don't worry, our board is not changing.

71
00:04:58,620 --> 00:05:00,780
‫Only the values on our browser is changing.

72
00:05:00,780 --> 00:05:03,120
‫If I refreshed this one, it will get back the same.

73
00:05:03,510 --> 00:05:08,070
‫You can do this with any website, not just with our website, but with any website.

74
00:05:08,430 --> 00:05:10,830
‫Also, let me try to drag it on this side.

75
00:05:11,430 --> 00:05:12,990
‫Click on the second box.

76
00:05:13,320 --> 00:05:16,740
‫Increase dividing its sizes.

77
00:05:16,740 --> 00:05:17,920
‫Increased my device.

78
00:05:17,930 --> 00:05:20,610
‫Select the first one, click on my batting.

79
00:05:20,610 --> 00:05:21,540
‫Try to increase.

80
00:05:22,080 --> 00:05:26,190
‫You can see the rate the same only the high descending white.

81
00:05:26,190 --> 00:05:27,920
‫Because we haven't provided any height.

82
00:05:28,170 --> 00:05:33,300
‫I rate is going to be 200 pixels, so the padding is increasing now.

83
00:05:35,270 --> 00:05:40,370
‫Fighting is increasing, maybe if I increase my border also, let me try to increase my border.

84
00:05:40,970 --> 00:05:43,400
‫You see, the world is exactly the same.

85
00:05:44,030 --> 00:05:51,410
‫And if I scroll down, move to the border box, my content is dying, you know, and the padding is

86
00:05:51,410 --> 00:05:52,250
‫72.

87
00:05:52,610 --> 00:05:54,630
‫And my border is 38.

88
00:05:54,650 --> 00:05:55,970
‫I'm adding both of them.

89
00:05:56,600 --> 00:05:58,100
‫So that's how it is going to work.

90
00:05:58,430 --> 00:06:04,080
‫Whereas if I walk with my content box, it is going to increase my space.

91
00:06:04,100 --> 00:06:11,270
‫So if I scroll here and if I increase padding, you can see the distance between both of them are increasing.

92
00:06:11,540 --> 00:06:12,290
‫Same photos.

93
00:06:12,290 --> 00:06:18,290
‫If I increase the border, it's increasing, which is a problem when we walk with all different types

94
00:06:18,290 --> 00:06:18,920
‫of content.

95
00:06:20,340 --> 00:06:21,570
‫Now, what is the solution?

96
00:06:21,810 --> 00:06:27,510
‫Do we need to change all the bags, all the bags manually when we are walking?

97
00:06:27,720 --> 00:06:31,730
‫No, what you can do is if you want, you can select the route.

98
00:06:31,950 --> 00:06:34,050
‫And if you remember, we have a strict.

99
00:06:35,270 --> 00:06:40,640
‫And by default, we can set border sizing as border walks.

100
00:06:42,370 --> 00:06:47,080
‫This all sort of problem, and we can now remove this, save this one.

101
00:06:47,410 --> 00:06:48,280
‫Get back here.

102
00:06:49,940 --> 00:06:58,400
‫And if I try to select the first one, try to increase it spotting, you can see the weight is not increasing,

103
00:06:58,400 --> 00:07:02,540
‫it's fixed, but we don't have any fixed height, so weight is not increasing.

104
00:07:03,520 --> 00:07:05,550
‫Let's see what happens if we have a fake site.

105
00:07:12,270 --> 00:07:14,040
‫Now here I have a fake site.

106
00:07:14,280 --> 00:07:20,190
‫If I try to increase or decrease, the width and height is going to remain same unless and until there

107
00:07:20,190 --> 00:07:25,990
‫is a break point break point like my padding is over 100 bricks and now suppose my height is limited

108
00:07:25,990 --> 00:07:26,610
‫to 200.

109
00:07:26,970 --> 00:07:33,240
‫But if I take batting, as 59 said, it's already taking 100 percent space.

110
00:07:33,250 --> 00:07:34,950
‫If you hover over this batting point.

111
00:07:35,220 --> 00:07:39,210
‫You see everything is green, which is 100 percent less batting now.

112
00:07:40,050 --> 00:07:45,120
‫Now, if I try to increase my batting more than this, maybe I'd be contradictions.

113
00:07:47,260 --> 00:07:53,280
‫Can see now things are troubling because my batting is greater than my height at this point of time,

114
00:07:53,290 --> 00:07:54,340
‫we have a three point.

115
00:07:58,140 --> 00:08:00,060
‫I hope you understand about the concept.

116
00:08:00,360 --> 00:08:03,990
‫One more important thing, if I just jump on to this body part.

117
00:08:04,740 --> 00:08:06,060
‫So we have this body.

118
00:08:07,770 --> 00:08:11,450
‫You see, there is by default, space on the top as well as on the water.

119
00:08:11,590 --> 00:08:21,120
‫If I close this one and I remove the margin for a while just to explain this one concept in back here

120
00:08:21,480 --> 00:08:22,740
‫and I click.

121
00:08:23,820 --> 00:08:30,270
‫Go to this body, you can see there is some beautiful space at the top with my body and when my feet

122
00:08:30,270 --> 00:08:32,340
‫are also, there are some beautiful space.

123
00:08:32,790 --> 00:08:38,460
‫If you want to remove all this space, you can set margin as zero.

124
00:08:40,500 --> 00:08:42,570
‫Margin as zero.

125
00:08:42,990 --> 00:08:48,510
‫So the by default margin will be zero for P-Dog, as well as formed by Marty Tagg.

126
00:08:48,840 --> 00:08:50,340
‫So now there is no space.

127
00:08:50,910 --> 00:08:52,140
‫I hope you got the idea.

128
00:08:53,010 --> 00:08:56,490
‫Now this will apply to everything, so be careful.

129
00:08:56,520 --> 00:09:02,010
‫We will discuss about this later, and I don't recommend this adding here every time, depending on

130
00:09:02,010 --> 00:09:03,150
‫your project requirement.

131
00:09:03,540 --> 00:09:07,530
‫But what you can do is you can either select individually and then donate to zero.

132
00:09:07,950 --> 00:09:14,250
‫Or if you understand this whole concept perfectly, then you can do it here and then we can change according

133
00:09:14,250 --> 00:09:16,070
‫to our requirement, wherever we want.

134
00:09:16,080 --> 00:09:17,400
‫It's our custom Gordon.

135
00:09:17,400 --> 00:09:18,720
‫We can do whatever we want.

136
00:09:18,990 --> 00:09:21,200
‫The basic thing 2.1.

137
00:09:21,240 --> 00:09:23,850
‫I hope you got the idea about bulk sizing.

138
00:09:24,660 --> 00:09:25,680
‫Thank you for calling.

139
00:09:26,070 --> 00:09:31,410
‫Let us understand about the margin as well as batting values in the next lecture.