1
00:00:02,420 --> 00:00:04,730
What is the CSS box model?

2
00:00:04,730 --> 00:00:07,850
We know a lot about HTML elements already,

3
00:00:07,850 --> 00:00:11,010
and we know that with the help of CSS selectors,

4
00:00:11,010 --> 00:00:12,850
for example, the type selector,

5
00:00:12,850 --> 00:00:16,820
we are able to change the style of our elements.

6
00:00:16,820 --> 00:00:20,140
Now, CSS has a specific way to

7
00:00:20,140 --> 00:00:22,460
interact with these elements and

8
00:00:22,460 --> 00:00:25,700
to refer to different parts of an element

9
00:00:25,700 --> 00:00:27,768
because CSS thinks

10
00:00:27,768 --> 00:00:32,710
about elements in a way that each element-

11
00:00:32,710 --> 00:00:34,180
each elements CSS

12
00:00:34,180 --> 00:00:36,200
can interact with, of course,

13
00:00:36,200 --> 00:00:39,640
is surrounded by different boxes.

14
00:00:39,640 --> 00:00:43,220
So you could say different layers, different parts,

15
00:00:43,220 --> 00:00:45,340
which define the styling,

16
00:00:45,340 --> 00:00:50,340
the position and the lay out of this element on our website.

17
00:00:50,530 --> 00:00:51,800
What does this mean?

18
00:00:51,800 --> 00:00:55,890
Well, an element has the content, so to say.

19
00:00:55,890 --> 00:00:58,160
The content is just a space,

20
00:00:58,160 --> 00:01:00,960
the actual, well content often element needs

21
00:01:01,960 --> 00:01:03,700
in our project here.

22
00:01:03,700 --> 00:01:07,810
This will be the space required here for the text for our

23
00:01:07,810 --> 00:01:08,643
today's challenge.

24
00:01:08,643 --> 00:01:12,693
So this is basically the content of this element.

25
00:01:13,590 --> 00:01:17,370
Now turns out that we need more than this content part,

26
00:01:17,370 --> 00:01:20,740
if we want to have a proper looking website.

27
00:01:20,740 --> 00:01:24,610
Besides the content we have, the so-called padding.

28
00:01:24,610 --> 00:01:29,000
The padding is the space. The content gets between, well,

29
00:01:29,000 --> 00:01:33,210
the content itself. And so to say the borders of our box,

30
00:01:33,210 --> 00:01:35,120
if we go back to our project

31
00:01:36,440 --> 00:01:38,420
and into our code and

32
00:01:38,420 --> 00:01:40,183
here to the anchor tag,

33
00:01:41,350 --> 00:01:43,727
we could add some padding maybe up here.

34
00:01:43,727 --> 00:01:44,560
And let's say,

35
00:01:44,560 --> 00:01:47,750
we want to have a padding of 12 pixels.

36
00:01:47,750 --> 00:01:51,930
With that, our text gets more space. You can see it here,

37
00:01:51,930 --> 00:01:56,410
but space between the content and the end of that box.

38
00:01:56,410 --> 00:02:00,137
So often element it lies inside. The experts call it

39
00:02:00,137 --> 00:02:02,637
the box model as this is kind of a box, so to say.

40
00:02:03,720 --> 00:02:06,140
We are not done with the padding though.

41
00:02:06,140 --> 00:02:08,680
There is more related to such an element,

42
00:02:08,680 --> 00:02:11,039
which makes it well such a box in the end.

43
00:02:11,039 --> 00:02:14,550
And this is the border we know about the border already.

44
00:02:14,550 --> 00:02:18,490
We use deported radius, for example, in our project,

45
00:02:18,490 --> 00:02:22,260
if you're going to go back to our anchor tech here,

46
00:02:22,260 --> 00:02:25,590
we have set the border radius,

47
00:02:25,590 --> 00:02:28,630
which allowed us to have these rounded corners,

48
00:02:28,630 --> 00:02:31,733
but we can also set the border property,

49
00:02:32,790 --> 00:02:34,100
the border property, well,

50
00:02:34,100 --> 00:02:38,870
simply written like this has three core definitions.

51
00:02:38,870 --> 00:02:41,844
One is the width of the border. For example,

52
00:02:41,844 --> 00:02:44,963
one pixel leader to have a really thin border.

53
00:02:45,900 --> 00:02:47,880
Then the type of border,

54
00:02:47,880 --> 00:02:51,850
this could be a dashboard for example, or a solid border,

55
00:02:51,850 --> 00:02:54,450
which would just be a solid line.

56
00:02:54,450 --> 00:02:57,653
And then we define the color of the border.

57
00:02:59,290 --> 00:03:00,123
Now our case,

58
00:03:00,123 --> 00:03:02,990
the border should have the same color as the background.

59
00:03:02,990 --> 00:03:05,330
So we use RGB and now

60
00:03:05,330 --> 00:03:07,200
1, 6,

61
00:03:07,200 --> 00:03:08,163
7,

62
00:03:09,430 --> 00:03:10,313
1,

63
00:03:11,670 --> 00:03:13,523
and 7, 8.

64
00:03:14,660 --> 00:03:18,107
With this in place, if we go back

65
00:03:18,107 --> 00:03:21,320
we obviously don't see a big difference because the border

66
00:03:21,320 --> 00:03:23,360
has the same color in our case,

67
00:03:23,360 --> 00:03:26,270
but you could of course change the color property here in

68
00:03:26,270 --> 00:03:28,170
the developer tools.

69
00:03:28,170 --> 00:03:29,480
If you would, for example,

70
00:03:29,480 --> 00:03:33,990
increase the size of the border to eight pixels and maybe

71
00:03:33,990 --> 00:03:38,550
take a yellow tone here for the color.

72
00:03:38,550 --> 00:03:41,030
Then you see that you have this border around here,

73
00:03:41,030 --> 00:03:42,280
not what we need at this stage,

74
00:03:42,280 --> 00:03:44,300
but you can still see you have the content,

75
00:03:44,300 --> 00:03:47,150
then the padding, and then the board around here.

76
00:03:47,150 --> 00:03:49,243
Let's reload to get rid of this change.

77
00:03:50,600 --> 00:03:52,150
With that, we are almost done.

78
00:03:52,150 --> 00:03:55,190
There is just one last thing missing to finish the Spock's

79
00:03:55,190 --> 00:03:58,393
model concept. And that's the so-called margin.

80
00:03:59,450 --> 00:04:03,450
The margin now is not related to the actual element

81
00:04:03,450 --> 00:04:06,190
in a way to the content, the way it is displayed.

82
00:04:06,190 --> 00:04:07,540
It's just a space.

83
00:04:07,540 --> 00:04:11,680
This element needs related to other elements or the limits

84
00:04:11,680 --> 00:04:14,363
top, left, bottom, right of our website.

85
00:04:15,350 --> 00:04:18,279
So if we say that the space between these elements is a bit

86
00:04:18,279 --> 00:04:19,113
too big,

87
00:04:19,113 --> 00:04:22,880
maybe then we can go back to our page here to the H one

88
00:04:22,880 --> 00:04:23,713
selector.

89
00:04:23,713 --> 00:04:28,030
And then we can say that we add the margin property like

90
00:04:28,030 --> 00:04:32,870
this. Let's say we give it a margin of 12 pixels with this.

91
00:04:32,870 --> 00:04:35,763
You see, now the space here is reduced.

92
00:04:37,090 --> 00:04:41,280
So that's the core concept off the CSS box model, content,

93
00:04:41,280 --> 00:04:44,100
padding, border, and margin.

94
00:04:44,100 --> 00:04:46,250
And if you think about another element, well,

95
00:04:46,250 --> 00:04:48,320
it would follow the same pattern.

96
00:04:48,320 --> 00:04:51,230
You have the content here and then patting border margin.

97
00:04:51,230 --> 00:04:52,063
And as you see,

98
00:04:52,063 --> 00:04:56,023
the margin defines the space between these two elements.

99
00:04:56,880 --> 00:05:00,060
Now we'll use these properties already in our project now,

100
00:05:00,060 --> 00:05:03,080
but there are a few more things to keep in mind when working

101
00:05:03,080 --> 00:05:04,563
with these properties here.

102
00:05:05,440 --> 00:05:08,370
Let's say our HTML code is just this paragraph.

103
00:05:08,370 --> 00:05:12,603
And we want to style these different properties here.

104
00:05:13,920 --> 00:05:15,820
Then you would go into CSS,

105
00:05:15,820 --> 00:05:19,840
use the paragraph type selector and add the padding.

106
00:05:19,840 --> 00:05:20,710
And as you see,

107
00:05:20,710 --> 00:05:23,930
I didn't add the padding with one single value here,

108
00:05:23,930 --> 00:05:26,870
but with four different values highlighted with different

109
00:05:26,870 --> 00:05:30,007
colors, because for the padding and the margin,

110
00:05:30,007 --> 00:05:34,090
we have four areas. We have to distance to the top,

111
00:05:34,090 --> 00:05:34,923
to the right,

112
00:05:34,923 --> 00:05:38,170
to the bottom and to the left for the content and the

113
00:05:38,170 --> 00:05:40,020
border. We obviously don't have that.

114
00:05:40,880 --> 00:05:44,650
Therefore you can define the padding for each of these

115
00:05:44,650 --> 00:05:46,320
single directions.

116
00:05:46,320 --> 00:05:48,820
So you can think about this clock here.

117
00:05:48,820 --> 00:05:50,390
You always start from the top.

118
00:05:50,390 --> 00:05:54,170
So this defines the padding between the content and the top

119
00:05:54,170 --> 00:05:55,733
of the corresponding element.

120
00:05:56,810 --> 00:05:59,536
The second value is the distance to the right

121
00:05:59,536 --> 00:06:01,120
forefront to the bottom

122
00:06:01,120 --> 00:06:02,620
and the forefront to the left.

123
00:06:03,740 --> 00:06:05,090
As I said for the border,

124
00:06:05,090 --> 00:06:07,190
while we don't have this differentiation,

125
00:06:07,190 --> 00:06:10,160
you simply define the border size then the border type

126
00:06:10,160 --> 00:06:11,930
and the border color.

127
00:06:11,930 --> 00:06:13,750
For the margin, for example

128
00:06:13,750 --> 00:06:17,810
we can follow this pattern, but it's a different one here.

129
00:06:17,810 --> 00:06:20,146
We only have two values now.

130
00:06:20,146 --> 00:06:24,010
Because we can, of course, define the value for each of

131
00:06:24,010 --> 00:06:25,830
these single direction, so to say,

132
00:06:25,830 --> 00:06:27,470
top, right, bottom, and left;

133
00:06:27,470 --> 00:06:31,423
or we can define the distance vertically and horizontally.

134
00:06:32,290 --> 00:06:35,740
Here, the first value would be the distance: top and bottom.

135
00:06:35,740 --> 00:06:38,513
The second value would be the distance: left and right.

136
00:06:39,580 --> 00:06:40,413
And finally,

137
00:06:40,413 --> 00:06:43,730
we could also just use one single value as we just did it.

138
00:06:43,730 --> 00:06:47,210
This would mean that we have the space of eight pixels for

139
00:06:47,210 --> 00:06:50,030
all directions top, right, bottom, and left

140
00:06:51,150 --> 00:06:52,850
With this new knowledge gained,

141
00:06:52,850 --> 00:06:56,060
we can now go back to our project and improve the styling a

142
00:06:56,060 --> 00:06:58,170
bit more, because let's be honest,

143
00:06:58,170 --> 00:07:00,803
this doesn't look too pretty at the moment.