1
00:00:00,000 --> 00:00:10,550
I Let's learn what is the CSS box model?

2
00:00:10,550 --> 00:00:18,750
The CSS box model is the basis off on layout control for the webpages.

3
00:00:18,750 --> 00:00:22,450
It is very easy to understand and use.

4
00:00:22,450 --> 00:00:28,950
Allowing us to position and space are HTML elements exactly as we want.

5
00:00:28,950 --> 00:00:34,570
There are four important elements in the box model.

6
00:00:34,570 --> 00:00:37,140
The first is our content.

7
00:00:37,140 --> 00:00:45,500
That can simply be an image are some texts and that is represented in these image at the

8
00:00:45,500 --> 00:00:46,150
center.

9
00:00:46,150 --> 00:00:52,250
Second element that is around the content is betting death,

10
00:00:52,250 --> 00:00:56,890
defying to the space between our content and the edge off the element.

11
00:00:56,890 --> 00:00:58,910
Next,

12
00:00:58,910 --> 00:01:01,060
we have the border element,

13
00:01:01,060 --> 00:01:07,080
which we can use to draw a line around our content and to finish.

14
00:01:07,080 --> 00:01:08,410
We have margin,

15
00:01:08,410 --> 00:01:15,810
which defines the space between the edge off the element and any other element off the page

16
00:01:15,810 --> 00:01:15,810
.

17
00:01:15,810 --> 00:01:25,970
So let's look to the street properties inserted in this model and see some of them starting

18
00:01:25,970 --> 00:01:28,450
with CSS border.

19
00:01:28,450 --> 00:01:34,840
That is the property that allow you to specify the style with and caller.

20
00:01:34,840 --> 00:01:36,380
Often elements border,

21
00:01:36,380 --> 00:01:42,250
and he's a short and property for the following individual border properties,

22
00:01:42,250 --> 00:01:53,450
the border wheat property that specifies do it's off the four borders do border style

23
00:01:53,450 --> 00:02:00,820
property that specifies what kind of border to display and the border color that is used to

24
00:02:00,820 --> 00:02:03,580
set the color off the four borders.

25
00:02:03,580 --> 00:02:07,140
If you use Onley,

26
00:02:07,140 --> 00:02:08,550
barred their property,

27
00:02:08,550 --> 00:02:18,530
you real effect all the four sides often element like this example where I ever style for

28
00:02:18,530 --> 00:02:30,350
my bereft border to effect all sides with a border wheat off 10 pixels bar their style.

29
00:02:30,350 --> 00:02:37,150
We saw his value and blue as my border caller.

30
00:02:37,150 --> 00:02:40,270
So what happens?

31
00:02:40,270 --> 00:02:49,410
You see these values applied in the paragraph like you can see in the browser in the least

32
00:02:49,410 --> 00:02:57,730
off CSS properties You see that U F individual properties for each side left,

33
00:02:57,730 --> 00:02:58,210
right,

34
00:02:58,210 --> 00:03:06,250
stop and bottom that can be used to change Onley one side off the border if you want.

35
00:03:06,250 --> 00:03:12,380
So if instead of border I use border top on Lee,

36
00:03:12,380 --> 00:03:17,150
the top side off the paragraph is affected with this property.

37
00:03:17,150 --> 00:03:24,850
That's what I'm going to do now Apply on Lee this property to border ducked.

38
00:03:24,850 --> 00:03:30,250
We'd saying values Onley changing barter style to dashed.

39
00:03:30,250 --> 00:03:37,750
So you see that this style is only applied to the top off our paragraph.

40
00:03:37,750 --> 00:03:47,750
Now let's look to the CSS margin property that is used to add space around elements.

41
00:03:47,750 --> 00:03:50,230
First,

42
00:03:50,230 --> 00:03:53,460
I replaced border values to Evel for borders.

43
00:03:53,460 --> 00:03:54,850
We'd same style.

44
00:03:54,850 --> 00:04:01,470
Now I m margin property to our paragraph rule.

45
00:04:01,470 --> 00:04:07,750
And if I simply create a margin with 100 pixels,

46
00:04:07,750 --> 00:04:12,470
this will give 100 pixels to all margins off the paragraph.

47
00:04:12,470 --> 00:04:25,110
I had now another pair if to see better the margins between these two elements if I simply

48
00:04:25,110 --> 00:04:27,250
changed to a lower margin value.

49
00:04:27,250 --> 00:04:32,780
The distance between the two elements decreases as expected,

50
00:04:32,780 --> 00:04:38,190
Margin property is just a simple,

51
00:04:38,190 --> 00:04:47,820
shortened property for the individual margin properties margin top rights bottom and left a

52
00:04:47,820 --> 00:04:51,470
similar situation that happens with border property.

53
00:04:51,470 --> 00:04:53,850
Now,

54
00:04:53,850 --> 00:04:55,580
if I want only change,

55
00:04:55,580 --> 00:05:04,080
stop margin off second pair if I have to waste to do it before I write C Assess And since I

56
00:05:04,080 --> 00:05:07,030
want to apply changes all in second tariff,

57
00:05:07,030 --> 00:05:17,600
I can create a class for my second paragraph that I give name text now in CSS code,

58
00:05:17,600 --> 00:05:21,950
I make the rule for this class with margin top property.

59
00:05:21,950 --> 00:05:29,050
We'd value one ever pixels and delete the previous rule inserted for paragraph elements.

60
00:05:29,050 --> 00:05:32,850
At this moment,

61
00:05:32,850 --> 00:05:39,150
I just have a margin top applied in the second paragraph using the correspondent class name

62
00:05:39,150 --> 00:05:39,150
.

63
00:05:39,150 --> 00:05:51,510
Other way that I can use is with margin property giving the Valley for all four sides 100

64
00:05:51,510 --> 00:05:55,440
pixels for top zero for rights but,

65
00:05:55,440 --> 00:05:55,810
um,

66
00:05:55,810 --> 00:06:08,470
and left using margin property with value 100 000 The first value represents margin.

67
00:06:08,470 --> 00:06:11,640
Top second value with zero margin,

68
00:06:11,640 --> 00:06:19,230
right certain margin bottom and last margin left that is,

69
00:06:19,230 --> 00:06:20,320
in practice,

70
00:06:20,320 --> 00:06:22,230
the same as use margin.

71
00:06:22,230 --> 00:06:33,600
Top with value 100 pixels Now to finish margins if you want.

72
00:06:33,600 --> 00:06:40,390
Just margin left and right with 50 pixels and the others with zero,

73
00:06:40,390 --> 00:06:56,280
you just need to write zero 50 pixels zero and 50 pixels to finish the box model elements.

74
00:06:56,280 --> 00:07:04,020
The padding property that is used to generate spice between content and margin and uses

75
00:07:04,020 --> 00:07:06,680
very similar with margin property.

76
00:07:06,680 --> 00:07:15,150
There are CSS properties for setting the bedding for each side.

77
00:07:15,150 --> 00:07:19,250
Often element top rights bought them and left.

78
00:07:19,250 --> 00:07:21,320
But like margin,

79
00:07:21,320 --> 00:07:27,800
you can use the shortened property padding that used for individual properties for each one

80
00:07:27,800 --> 00:07:29,610
off the far sides.

81
00:07:29,610 --> 00:07:36,070
I changed now my second paragraph style,

82
00:07:36,070 --> 00:07:43,780
and there's a petting off 20 pixels and you see that spice between text and margin off

83
00:07:43,780 --> 00:07:46,250
second paragraph increases.

84
00:07:46,250 --> 00:07:54,300
If you only want to change just bottom value,

85
00:07:54,300 --> 00:08:06,550
you can simply use spending bottom with 10 pixels are you Use bedding property with zero

86
00:08:06,550 --> 00:08:08,580
zero,

87
00:08:08,580 --> 00:08:13,950
then pixels and zero being deserted.

88
00:08:13,950 --> 00:08:17,550
Valley correspondent to petting bottom property.

89
00:08:17,550 --> 00:08:22,050
It's so for now,

90
00:08:22,050 --> 00:08:23,060
things.