1
00:00:00,120 --> 00:00:04,110
Welcome to this section of box model.

2
00:00:04,350 --> 00:00:07,200
So what is box model in CSIS?

3
00:00:07,230 --> 00:00:15,600
Well, the box model is one of the core concepts in web design and web development.

4
00:00:16,079 --> 00:00:25,740
It encompasses everything that makes up a design from headers, footers and main content areas to margins,

5
00:00:25,740 --> 00:00:27,180
patterns and borders.

6
00:00:27,180 --> 00:00:30,690
So everything on a web page is a box.

7
00:00:31,530 --> 00:00:35,470
Everything on a web page is a box.

8
00:00:35,490 --> 00:00:37,060
Take note about this.

9
00:00:37,080 --> 00:00:43,560
So looking at this one, anything on this page is being regarded as a box.

10
00:00:43,680 --> 00:00:50,670
So let me remove the background color and this one for now, and let's maintain the red background over

11
00:00:50,700 --> 00:00:51,990
the red color over there.

12
00:00:52,230 --> 00:01:01,290
So anything you see on the page, whether it is H one images, anything is being regarded as a box.

13
00:01:01,770 --> 00:01:02,760
That's the key point.

14
00:01:02,760 --> 00:01:03,990
You need to take note here.

15
00:01:04,019 --> 00:01:09,870
And each box has its own properties that can be styled with CSS.

16
00:01:10,470 --> 00:01:11,920
See where we are heading towards.

17
00:01:11,940 --> 00:01:18,180
Now, every element on a web page is being described as a box, and this box has properties.

18
00:01:18,210 --> 00:01:24,600
The CSS box model is a model for describing the boxes that make up a web page.

19
00:01:24,630 --> 00:01:27,420
One property is what we call width.

20
00:01:30,110 --> 00:01:36,680
The width of the element here is the width from where from left to right is the width of my element.

21
00:01:37,070 --> 00:01:38,060
How?

22
00:01:38,060 --> 00:01:39,540
The width of the particular element.

23
00:01:39,560 --> 00:01:43,220
Taking this box, for example, this box has a width.

24
00:01:43,310 --> 00:01:44,030
Right.

25
00:01:44,030 --> 00:01:45,210
So let's look at this box.

26
00:01:45,210 --> 00:01:45,620
See that?

27
00:01:45,620 --> 00:01:49,410
This box, you can see that the width of this box is from here to here.

28
00:01:49,430 --> 00:01:53,150
The next one is what we call the height.

29
00:01:53,150 --> 00:01:55,460
So from here to here is a weight.

30
00:01:55,550 --> 00:01:58,340
The height of my box is this one.

31
00:01:58,340 --> 00:02:00,470
The height of my box.

32
00:02:01,010 --> 00:02:03,590
So it is what you call height.

33
00:02:04,490 --> 00:02:09,530
And apart from height, we also have what is called pattern wear for the pattern.

34
00:02:09,560 --> 00:02:12,260
Difficult to explain to you within this box.

35
00:02:13,040 --> 00:02:15,830
And then the last one would call a margin.

36
00:02:16,060 --> 00:02:23,570
Assuming that we have many boxes, the margin is a space between two elements to the net less one is

37
00:02:23,570 --> 00:02:25,300
a margin that we want.

38
00:02:25,310 --> 00:02:29,840
We take this one the height, the margin and party into consideration.

39
00:02:30,290 --> 00:02:38,810
So by understanding these properties and how they work together, you can create complex design with

40
00:02:38,810 --> 00:02:39,320
ease.

41
00:02:39,980 --> 00:02:45,980
Each box has its own properties that can be style, so that's what we are going to talk about.

42
00:02:46,070 --> 00:02:54,650
But before we end up this video, let me show you that every element is a box that has all these properties,

43
00:02:54,680 --> 00:02:58,580
meaning that any element on the page is a box.

44
00:02:58,580 --> 00:03:05,870
Meaning the half of this property is called margin padding and then height and width.

45
00:03:05,900 --> 00:03:08,780
So let me show you with using the data.

46
00:03:08,810 --> 00:03:14,800
So right click on any page and then click on style.

47
00:03:14,810 --> 00:03:21,230
If we see there are some around we have down here and this is what you call the box model.

48
00:03:21,620 --> 00:03:26,810
So any element that we click on, so let me select this one and click on the H one.

49
00:03:27,020 --> 00:03:35,750
We see that when I click on I have this beautiful box model here, meaning that this particular this

50
00:03:35,750 --> 00:03:39,290
particular element is made up with this box.

51
00:03:40,050 --> 00:03:48,780
We see that this box has a margin as we talk about has a border, has padding and has a width and in

52
00:03:48,780 --> 00:03:55,710
height we see that to every element has this box model or both properties.

53
00:03:55,980 --> 00:03:57,240
So let's video.

54
00:03:57,240 --> 00:04:05,340
Let's start with the width and height properties of any element on the page.