1
00:00:00,690 --> 00:00:03,170
Hello everyone and welcome back.

2
00:00:03,180 --> 00:00:11,540
In today's video you will learn about the box model in CSX all HDMI elements can be considered as boxes.

3
00:00:11,600 --> 00:00:19,470
The CSX this box model can be thought of as a box that drops on each external and it consists of margins.

4
00:00:19,470 --> 00:00:25,630
Borders putting on the content of the human element itself as you can see in the center.

5
00:00:25,630 --> 00:00:33,300
It's got this content of the human element and outside that content we have padding and outside the

6
00:00:33,300 --> 00:00:33,770
padding.

7
00:00:33,780 --> 00:00:36,470
We have border and outside the border.

8
00:00:36,510 --> 00:00:38,270
We have margin.

9
00:00:38,610 --> 00:00:41,730
Let's try an example to understand this box better.

10
00:00:42,750 --> 00:00:54,500
Let's out a paragraph let's give it some takes say Loren Ibsen dollar let's call business couple of

11
00:00:54,500 --> 00:00:55,090
times.

12
00:00:59,420 --> 00:01:07,410
Let's say the let's bring a bar life so as you can see we've got this paragraph on the screen.

13
00:01:07,690 --> 00:01:13,150
And now when we inspected.

14
00:01:13,400 --> 00:01:15,830
So as you can see we've got this blue color.

15
00:01:16,670 --> 00:01:20,480
So this blue glow represents the content of our estimate element.

16
00:01:20,480 --> 00:01:23,330
And also if you can see we've got this orange color as well.

17
00:01:23,600 --> 00:01:27,170
So despite each color it represents the margin.

18
00:01:27,170 --> 00:01:31,700
So by deflate paragraph has a margin of 16 pixels for top and bottom.

19
00:01:32,060 --> 00:01:39,370
So that's why we see it just on top and bottom see if you change it to say 16 pixels all around.

20
00:01:40,090 --> 00:01:44,460
And now when we go over we've got this orange color on all the sides.

21
00:01:44,600 --> 00:01:50,180
We don't see any padding here because the paragraph element does not have a of by default.

22
00:01:50,210 --> 00:02:00,640
So let's add some say putting it in pixels and now as you can see you've got this green color outside

23
00:02:00,640 --> 00:02:01,750
OK blue color.

24
00:02:02,170 --> 00:02:04,990
So this green dollar represents the padding.

25
00:02:04,990 --> 00:02:17,540
Let us out the border as well say border five pixels solid on a blue let's go over here and now as you

26
00:02:17,540 --> 00:02:23,220
can see you've got this light blue color content and I would say that we've got this green color padding

27
00:02:23,670 --> 00:02:31,460
and outside that we've got our border an outside doctor we have the margin and that's how the box model

28
00:02:31,460 --> 00:02:32,930
looks for a real estimate.

29
00:02:33,040 --> 00:02:41,590
And then also let's I alluded to an estimate element see for the pixels.

30
00:02:41,620 --> 00:02:47,290
Also let's give it a height say 200 pixels.

31
00:02:47,420 --> 00:02:53,300
And as you can see when we give women height to an element it represents the weather height of the content

32
00:02:53,320 --> 00:02:53,850
on the.

33
00:02:54,940 --> 00:03:00,760
And now as you can see on the bottom left side of the box we've got the dimensions.

34
00:03:00,800 --> 00:03:04,510
So it is 446 pixels by 246 pixels.

35
00:03:05,090 --> 00:03:07,390
But we give the height just us two hundred pixels.

36
00:03:07,400 --> 00:03:15,170
So these extra pixels extra 46 pixels it just when we are batting and border to an element it adds to

37
00:03:15,170 --> 00:03:16,850
the total width and height of the element.

38
00:03:17,390 --> 00:03:21,130
So if you see here we've given about image of 18 pixels.

39
00:03:21,980 --> 00:03:26,880
So body water making pixel padding top eight in pixel which is 36 pixels.

40
00:03:26,900 --> 00:03:31,250
Similarly we have water bottom and border top which is five pixels each.

41
00:03:31,550 --> 00:03:32,710
So then pixels back.

42
00:03:32,960 --> 00:03:42,050
So 36 plus 10 which is 46 and we give the height as 200 pixels so 200 plus 46 which is 246 pixels.

43
00:03:42,080 --> 00:03:49,150
And that's how our element ended up with the height of 246 pixels and that's also today guys.

44
00:03:49,150 --> 00:03:54,710
If there's something that you did not understand feel free to drop a comment and we will discuss it.

45
00:03:54,820 --> 00:03:57,320
See you in the next video by antique get.