1
00:00:00,600 --> 00:00:02,010
Hello and welcome.

2
00:00:02,040 --> 00:00:10,280
In this video I will be explaining what the CSA box model is.

3
00:00:10,830 --> 00:00:15,110
What is their Seer says box my look.

4
00:00:15,300 --> 00:00:25,630
Singer says box model is essentially a box that wraps around every hastier male element.

5
00:00:26,080 --> 00:00:39,030
NCAA says the term mbox model is used when talking about design and lay out the box model comprises

6
00:00:39,120 --> 00:00:42,520
of several components of parts.

7
00:00:42,780 --> 00:00:52,300
So we have the margin which is the space around the outside of the element.

8
00:00:52,360 --> 00:00:54,360
Next we have the border.

9
00:00:54,570 --> 00:01:01,750
This is the solid line that sits outside the padding with the padding.

10
00:01:01,920 --> 00:01:05,920
This is the space around the content.

11
00:01:05,940 --> 00:01:08,350
For example you have a paragraph.

12
00:01:08,360 --> 00:01:15,220
The space around the paragraph can be regarded as the padding and then we have the tool content.

13
00:01:15,270 --> 00:01:22,510
This is the area where the text the images are that content you have on the page.

14
00:01:22,530 --> 00:01:28,860
This is where it appears to show you what the box model looks like.

15
00:01:28,860 --> 00:01:34,240
Just few go any basic web page or pull on but there use this web page.

16
00:01:34,240 --> 00:01:41,770
I have been working on so find the Course find school expand their web page so you can see the box model

17
00:01:41,790 --> 00:01:46,790
properly so all you need to do is just right click on any elements.

18
00:01:46,800 --> 00:01:47,570
See.

19
00:01:47,720 --> 00:01:53,550
Right click on the image element and click on inspect and that will show the box model.

20
00:01:53,550 --> 00:01:55,460
You can see this is the box model here.

21
00:01:55,470 --> 00:01:56,500
This area here.

22
00:01:56,970 --> 00:02:01,690
So that's the margin and he has four sides.

23
00:02:01,860 --> 00:02:08,650
The top will go the right the left the button next go the padding.

24
00:02:08,790 --> 00:02:10,680
Also the padded has four sides.

25
00:02:10,690 --> 00:02:16,800
We've got the top the right the bottom from the left and here.

26
00:02:16,830 --> 00:02:18,230
This is the content.

27
00:02:18,390 --> 00:02:23,950
So this is where all the cont'd the pay you will appear like it is and so on.

28
00:02:24,200 --> 00:02:28,090
That's where we appears so this is a content area.

29
00:02:28,440 --> 00:02:31,260
And then you can see the border.

30
00:02:31,260 --> 00:02:39,780
You can see this is the border which sits just on top of the padding so you can see the border goes

31
00:02:39,780 --> 00:02:45,890
around the pad in and the content.

32
00:02:46,920 --> 00:02:57,960
You can assign values to the marjean the border and the padding property so just by using csx you can

33
00:02:58,020 --> 00:03:01,000
assign pixel values to them.

34
00:03:01,410 --> 00:03:06,000
And when you apply values the values depending on the number of values.

35
00:03:06,000 --> 00:03:08,690
Remember that the margin and the padding.

36
00:03:08,700 --> 00:03:11,380
They have four sides.

37
00:03:11,400 --> 00:03:17,060
The top right the bottom on the left.

38
00:03:17,130 --> 00:03:22,710
So depending on if you adding four values then it would be applied to the four sides.

39
00:03:22,710 --> 00:03:28,120
But if you only apply in two values then they would be distributed accordingly.

40
00:03:28,530 --> 00:03:37,290
In the next feed you will go into experiment adding values to margin and padding so that you can see

41
00:03:37,380 --> 00:03:39,690
how the various values work.

42
00:03:39,750 --> 00:03:47,100
When you apply them so that's it for this P2 or C access mbox model.

43
00:03:47,280 --> 00:03:49,390
Thank you for watching and have fun there.