1
00:00:02,320 --> 00:00:03,961
With the theory out of the way,

2
00:00:03,961 --> 00:00:07,304
we can now apply our new knowledge about the box model

3
00:00:07,304 --> 00:00:11,511
to our project. For this I'm back in the code.

4
00:00:11,511 --> 00:00:13,564
And I would like to get started with our

5
00:00:13,564 --> 00:00:16,300
H one element up here.

6
00:00:16,300 --> 00:00:19,004
We applied a margin of 12 pixels,

7
00:00:19,004 --> 00:00:21,340
so we use the single value here.

8
00:00:21,340 --> 00:00:24,908
This means a margin of 12 pixels is applied to the top,

9
00:00:24,908 --> 00:00:27,318
the right, the bottom and the left.

10
00:00:27,318 --> 00:00:31,590
And I don't think we need this margin definition here

11
00:00:31,590 --> 00:00:33,362
because back in the project,

12
00:00:33,362 --> 00:00:37,753
if we use our Def tools and go to the H one element,

13
00:00:38,719 --> 00:00:43,086
you see the box model indicated in the browser here,

14
00:00:43,086 --> 00:00:45,750
the blue part is the content,

15
00:00:45,750 --> 00:00:48,460
and the orange part is the margin.

16
00:00:48,460 --> 00:00:52,303
If we use our inspect option here,

17
00:00:52,303 --> 00:00:55,467
we can also navigate right here until you see better.

18
00:00:55,467 --> 00:00:59,377
You can also find the box model in the dev tools,

19
00:00:59,377 --> 00:01:02,809
by the way, are very great help for in such cases.

20
00:01:02,809 --> 00:01:05,450
If we go to our styles tab again, right here,

21
00:01:05,450 --> 00:01:08,870
selecting the element and then scroll down further and

22
00:01:08,870 --> 00:01:11,733
further, we can see, well, our box model,

23
00:01:11,733 --> 00:01:16,470
as explained on the slide previously in the center here,

24
00:01:16,470 --> 00:01:18,843
you can see the content also highlighted blue

25
00:01:18,843 --> 00:01:21,483
in the browser window.

26
00:01:21,483 --> 00:01:25,339
Then we don't have any padding or border for this element,

27
00:01:25,339 --> 00:01:29,870
but we have the margin with 12 pixels all around.

28
00:01:29,870 --> 00:01:31,595
The margin all around, as I said is

29
00:01:31,595 --> 00:01:33,280
not what we need in here.

30
00:01:33,280 --> 00:01:36,920
I think we need the margin to the top and to the bottom,

31
00:01:36,920 --> 00:01:37,753
by the way,

32
00:01:37,753 --> 00:01:42,166
this overlap here of the margin to the next element is due

33
00:01:42,166 --> 00:01:45,222
to the so-called margin collapsing.

34
00:01:45,222 --> 00:01:48,630
We will explore this a bit later in the course.

35
00:01:48,630 --> 00:01:50,768
So for the moment we will just ignore this.

36
00:01:50,768 --> 00:01:53,710
Just want to make sure that we are aware of the fact that

37
00:01:53,710 --> 00:01:55,910
this is happening right here.

38
00:01:55,910 --> 00:01:56,867
However, as I said,

39
00:01:56,867 --> 00:02:00,340
a margin to the top and to the bottom would be enough

40
00:02:00,340 --> 00:02:02,220
to give our element a bit space,

41
00:02:02,220 --> 00:02:04,174
but the left and right margin is not required.

42
00:02:04,174 --> 00:02:08,300
The centering happens due to our body element here,

43
00:02:08,300 --> 00:02:12,050
having the text align property applied.

44
00:02:12,050 --> 00:02:15,177
And as we learned text align center centers

45
00:02:15,177 --> 00:02:18,812
the content inside of an element. So in our case,

46
00:02:18,812 --> 00:02:20,722
the text is part of the H one element,

47
00:02:20,722 --> 00:02:22,057
which is part of the body.

48
00:02:22,057 --> 00:02:25,153
Therefore it is centered.m So long story short,

49
00:02:25,153 --> 00:02:30,153
we'll go back to our code and changed as 12 pixels here to

50
00:02:30,581 --> 00:02:34,680
12 pixels, zero. So 12 pixels margin, top bottom,

51
00:02:34,680 --> 00:02:36,773
zero margin left and right.

52
00:02:38,040 --> 00:02:39,360
Saving this and going back well

53
00:02:39,360 --> 00:02:42,640
shows us that now this margin to the left

54
00:02:42,640 --> 00:02:43,850
and to the right is gone,

55
00:02:43,850 --> 00:02:46,700
as you can see it here, the element is still centered

56
00:02:46,700 --> 00:02:50,783
as explained previously. Let's go to the next element here,

57
00:02:50,783 --> 00:02:53,807
and let's maybe stay here in a dev tools to show you this in

58
00:02:53,807 --> 00:02:55,730
a bit more convenient way.

59
00:02:55,730 --> 00:02:57,939
Here, Our anchor tech has a padding,

60
00:02:57,939 --> 00:03:00,100
so no margin here, but a padding.

61
00:03:00,100 --> 00:03:04,298
So it's this space between the content and the actual border

62
00:03:04,298 --> 00:03:07,995
of our elements. So to say, if we scroll down again,

63
00:03:07,995 --> 00:03:09,834
you can also see this here.

64
00:03:09,834 --> 00:03:12,980
We have the content, then we have the padding

65
00:03:12,980 --> 00:03:15,126
and we have a slight border added here.

66
00:03:15,126 --> 00:03:17,093
So this part here is okay.

67
00:03:17,093 --> 00:03:20,810
I just think we need a bit more padding to the left and to

68
00:03:20,810 --> 00:03:22,850
the right to give this element, well,

69
00:03:22,850 --> 00:03:27,525
a better look. Therefore, if we go back to our padding

70
00:03:27,525 --> 00:03:29,309
and here we add a space again,

71
00:03:29,309 --> 00:03:31,749
as before no commas or anything like that.

72
00:03:31,749 --> 00:03:36,170
And here we could give it a margin of maybe 48 pixels.

73
00:03:36,170 --> 00:03:39,000
As you see, for our values we use pixels here.

74
00:03:39,000 --> 00:03:41,450
So we use the unit for the zero value.

75
00:03:41,450 --> 00:03:43,503
This is not required because well, zero is zero,

76
00:03:43,503 --> 00:03:45,720
no matter with the right pixels or zero,

77
00:03:45,720 --> 00:03:49,258
just as the plain number here. Let's go back.

78
00:03:49,258 --> 00:03:52,190
And yeah, I think now this looks better already.

79
00:03:52,190 --> 00:03:54,005
The space between our H one and the anchor tech

80
00:03:54,005 --> 00:03:56,670
is something we'll tackle a bit later.

81
00:03:56,670 --> 00:03:59,576
The next part of our page that I would like to tackle with

82
00:03:59,576 --> 00:04:03,556
our box model logic is the order list here.

83
00:04:03,556 --> 00:04:08,180
The order list here has no specific property of our box

84
00:04:08,180 --> 00:04:09,058
model applied.

85
00:04:09,058 --> 00:04:13,210
All these properties and values are added automatically.

86
00:04:13,210 --> 00:04:15,731
If we inspect the code here and scroll up,

87
00:04:15,731 --> 00:04:20,731
you'll see that all these rules here are applied by default

88
00:04:21,100 --> 00:04:23,310
by the browser for our order lists.

89
00:04:23,310 --> 00:04:25,710
So we didn't specify anything.

90
00:04:25,710 --> 00:04:26,860
This is a bit of a problem here,

91
00:04:26,860 --> 00:04:29,560
because if you close to inspect our element,

92
00:04:29,560 --> 00:04:31,058
maybe like this, it becomes evident,

93
00:04:31,058 --> 00:04:33,338
or maybe let's use this logic here.

94
00:04:33,338 --> 00:04:34,696
So if you inspect it like this,

95
00:04:34,696 --> 00:04:38,850
you see that the element is not really centered.

96
00:04:38,850 --> 00:04:41,910
Specifically, the list items here are kind of off,

97
00:04:41,910 --> 00:04:43,908
so to say.

98
00:04:43,908 --> 00:04:45,640
We can change this quickly

99
00:04:45,640 --> 00:04:47,242
with a little bit of a trick when

100
00:04:47,242 --> 00:04:50,200
it comes to centering elements.

101
00:04:50,200 --> 00:04:53,749
Centering here is not related to the text align center rule,

102
00:04:53,749 --> 00:04:55,647
be applied to the body element.

103
00:04:55,647 --> 00:04:58,930
This referred to centering the content,

104
00:04:58,930 --> 00:05:01,170
text content of an element. Here,

105
00:05:01,170 --> 00:05:04,362
we want to center the actual element. For this,

106
00:05:04,362 --> 00:05:07,380
we have a little trick and this trick can be

107
00:05:07,380 --> 00:05:10,690
applied here in our ordered list element.

108
00:05:10,690 --> 00:05:12,320
And there,

109
00:05:12,320 --> 00:05:16,684
I know first one to give our list a specific width.

110
00:05:16,684 --> 00:05:20,883
So let's say we give it a width of maybe 500 pixels.

111
00:05:22,490 --> 00:05:23,350
Let's do this.

112
00:05:23,350 --> 00:05:25,590
Now we see that the centering is a real big issue here.

113
00:05:25,590 --> 00:05:26,438
You see it's totally off,

114
00:05:26,438 --> 00:05:29,435
but now we have specified that right here.

115
00:05:29,435 --> 00:05:32,900
Our total element has this predefined width.

116
00:05:32,900 --> 00:05:35,370
So to unselect this, you see, we have bigger.

117
00:05:35,370 --> 00:05:37,909
Now. It becomes smaller and very important,

118
00:05:37,909 --> 00:05:41,983
not because of the width being inherited by our list items.

119
00:05:41,983 --> 00:05:45,116
But the width is, as I said, based on common sense,

120
00:05:45,116 --> 00:05:47,868
not a property, which is inherited,

121
00:05:47,868 --> 00:05:52,610
but if we shrink the size of the containing element,

122
00:05:52,610 --> 00:05:55,210
then the nested elements will also shrink.

123
00:05:55,210 --> 00:05:57,273
If we don't give them a bigger width,

124
00:05:57,273 --> 00:05:59,457
therefore we have this reduced

125
00:05:59,457 --> 00:06:02,450
width here for our list items.

126
00:06:02,450 --> 00:06:05,463
But this was just a step one because now it's totally off.

127
00:06:06,850 --> 00:06:10,620
But if you now go back to the code and work with our margin

128
00:06:10,620 --> 00:06:13,730
property, we just learned about in detail,

129
00:06:13,730 --> 00:06:18,730
I will now apply a margin of 36 pixels to the top.

130
00:06:19,890 --> 00:06:22,900
This gives it some additional space here between our button

131
00:06:22,900 --> 00:06:23,853
and the list.

132
00:06:25,340 --> 00:06:26,670
Then a space.

133
00:06:26,670 --> 00:06:28,660
And then for the distance to the right,

134
00:06:28,660 --> 00:06:32,910
I will apply the auto property for the bottom a distance

135
00:06:32,910 --> 00:06:36,163
of zero. And for the left again, auto.

136
00:06:37,130 --> 00:06:41,358
Now, why auto? If we save this and go back,

137
00:06:41,358 --> 00:06:44,074
you see that under this, that our element

138
00:06:44,074 --> 00:06:46,090
is, well, almost centered.

139
00:06:46,090 --> 00:06:47,910
Now we have to add one additional thing,

140
00:06:47,910 --> 00:06:51,057
but with the auto value for the left and right part of our

141
00:06:51,057 --> 00:06:54,975
margin property, elements can be centered.

142
00:06:54,975 --> 00:06:59,171
So the browser automatically adds the identical space to the

143
00:06:59,171 --> 00:07:01,780
left and to the right of our element.

144
00:07:01,780 --> 00:07:04,450
And therefore it centers this element.

145
00:07:04,450 --> 00:07:06,990
Why is it not perfectly centered though? Well,

146
00:07:06,990 --> 00:07:08,936
this is because if we scroll down,

147
00:07:08,936 --> 00:07:12,610
we have this default padding of 40 pixels here

148
00:07:12,610 --> 00:07:14,530
applied. Here, you can also see our

149
00:07:14,530 --> 00:07:17,640
exact same margin to the left and to the right.

150
00:07:17,640 --> 00:07:18,870
So this is working.

151
00:07:18,870 --> 00:07:23,716
But if we now go back once again and add a padding of zero

152
00:07:23,716 --> 00:07:28,716
here to our element, then you see, we finally centered it.

153
00:07:30,410 --> 00:07:32,740
That's also one of the reasons why

154
00:07:32,740 --> 00:07:35,180
this box model is so important.

155
00:07:35,180 --> 00:07:38,492
It doesn't only help us to define the style of our specific

156
00:07:38,492 --> 00:07:40,984
elements. It also helps us to, well,

157
00:07:40,984 --> 00:07:45,010
the work on the alignment of the elements here,

158
00:07:45,010 --> 00:07:48,363
we center the element with this margin auto rule.

159
00:07:49,370 --> 00:07:50,980
However, we are not done yet,

160
00:07:50,980 --> 00:07:53,845
because I think besides the fact that the list is not

161
00:07:53,845 --> 00:07:55,402
organized in a better way,

162
00:07:55,402 --> 00:07:58,527
the list elements still look a bit strange.

163
00:07:58,527 --> 00:08:00,335
Therefore let's not work on these.

164
00:08:00,335 --> 00:08:02,500
And if we inspect them first, you see, well,

165
00:08:02,500 --> 00:08:06,370
what is obviously missing is some padding here for these

166
00:08:06,370 --> 00:08:10,138
list items. We only have the content and the margin,

167
00:08:10,138 --> 00:08:13,929
but the space between our text and the border of our

168
00:08:13,929 --> 00:08:18,540
elements here is way too small. So let's change this.

169
00:08:18,540 --> 00:08:23,430
And for that, I'll add some padding first,

170
00:08:23,430 --> 00:08:26,980
adding in all directions, maybe have 16 pixels here.

171
00:08:26,980 --> 00:08:27,813
Let's see.

172
00:08:28,750 --> 00:08:31,425
Yep. Looks a lot better already, as I would say.

173
00:08:31,425 --> 00:08:34,942
So this is this box model concept in practice.

174
00:08:34,942 --> 00:08:38,900
It will be a concept which we'll use for building basically

175
00:08:38,900 --> 00:08:42,110
any website in the future and also in this course,

176
00:08:42,110 --> 00:08:44,010
but at this point of the course,

177
00:08:44,010 --> 00:08:48,713
it's time to switch back from CSS to HTML again.