1
00:00:01,070 --> 00:00:03,620
Hello everyone and welcome back.

2
00:00:03,620 --> 00:00:10,130
In today's video we will learn about the Blocks sizing property of CSX in the previous video we learned

3
00:00:10,130 --> 00:00:18,020
about the concept of box model how all achievable elements can be considered as boxes and many are pouting

4
00:00:18,020 --> 00:00:22,840
and bother doing it at the minute it adds to its total width and height.

5
00:00:22,850 --> 00:00:25,020
Now let's say we have these two elements.

6
00:00:25,160 --> 00:00:28,090
As you can see both of these they look alike.

7
00:00:28,280 --> 00:00:30,560
Just out the background color is different.

8
00:00:31,040 --> 00:00:33,620
Now let's add a padding to one color.

9
00:00:33,770 --> 00:00:41,200
So let's bring this up here let's say I got into this second car seat but total of two pixels that save

10
00:00:41,220 --> 00:00:45,530
it I'm now as you can see this second guy that looks bigger.

11
00:00:45,590 --> 00:00:52,970
And this is happening because we added this fighting box model the concept that lets say we don't want

12
00:00:52,970 --> 00:00:53,810
this to happen.

13
00:00:54,170 --> 00:01:01,370
So for that we have another property called Box sizing it accepts two values bottom box and content

14
00:01:01,370 --> 00:01:02,590
box.

15
00:01:02,590 --> 00:01:04,280
The default values control box.

16
00:01:04,280 --> 00:01:07,950
So currently what you're seeing is the content box.

17
00:01:08,120 --> 00:01:14,840
So let's stretching into a little box sizing so box sizing by default it is content box that's make

18
00:01:14,840 --> 00:01:18,060
it by the box let's save it.

19
00:01:18,060 --> 00:01:21,440
And now as you can see the boxes did not increase.

20
00:01:21,470 --> 00:01:26,770
So the bottom box values includes the padding and border in an element to do within height.

21
00:01:26,860 --> 00:01:38,170
Now this has a side effect let's check that out see instead of these text we had image you let's add

22
00:01:38,170 --> 00:01:40,330
a glossy image.

23
00:01:41,140 --> 00:01:43,900
Let's give it the image you also got an image here.

24
00:01:43,900 --> 00:01:49,750
Let's just wasted let's go to an alternate text.

25
00:01:49,750 --> 00:01:58,570
So a random image let's copy this image dog and paste it for the second one as well.

26
00:01:59,530 --> 00:02:01,930
Let's say that let's bring about good editor.

27
00:02:02,380 --> 00:02:09,550
Let's add some states for this image so we may see with hundred percent.

28
00:02:09,990 --> 00:02:11,730
So what we're telling you viewers.

29
00:02:11,810 --> 00:02:16,470
Take the 100 percent of the word available inside the building at the minute.

30
00:02:16,470 --> 00:02:16,910
All right.

31
00:02:17,040 --> 00:02:22,080
So as you can see the first one is taking the entitlement because there's no padding or border in that

32
00:02:22,080 --> 00:02:22,670
division.

33
00:02:23,280 --> 00:02:29,820
But in the second one we have given this body so it has this empty space on all the sides.

34
00:02:29,820 --> 00:02:34,620
Let's try increasing the balance in self titled do we make it 48 pixels.

35
00:02:34,620 --> 00:02:40,750
And now as you can see our image reduced similarly let's try making it to the pixels.

36
00:02:40,800 --> 00:02:43,250
Again the size of our image reduced.

37
00:02:43,890 --> 00:02:49,680
And this is happening because the to do with this speaks to 300 pixels on view using Box sizing to border

38
00:02:49,680 --> 00:02:50,010
box.

39
00:02:50,010 --> 00:02:51,820
So it includes the body.

40
00:02:51,840 --> 00:02:53,490
Also in the wind.

41
00:02:53,790 --> 00:03:00,180
So when we increase the body and with this constant which is 300 pixels so it it results in reducing

42
00:03:00,180 --> 00:03:01,410
the width of the image.

43
00:03:02,040 --> 00:03:05,500
So that is the side effect of using what it.

44
00:03:05,940 --> 00:03:16,390
Say for example the outer body here as well say body in 32 pixels let's say the.

45
00:03:16,530 --> 00:03:21,330
And as you can see the box size increased but the image remains the same.

46
00:03:21,540 --> 00:03:24,980
Similarly that's why I am using it more say 60 pixels.

47
00:03:25,130 --> 00:03:27,480
And as you can see the box size is increasing.

48
00:03:27,940 --> 00:03:33,130
But the images stay in the same dimension which is 300 pixels by 300 pixels.

49
00:03:33,180 --> 00:03:38,950
So both these values have the pros and cons there will be times when you will have to use body box and

50
00:03:38,950 --> 00:03:45,020
there will be time then you will have to use content box that's all it for today guys.

51
00:03:45,060 --> 00:03:50,520
If there is something that you did not understand feel free to comment on we will discuss it.

52
00:03:50,640 --> 00:03:53,140
See you in the next video by anti-gay.