1
00:00:02,100 --> 00:00:03,060
So that's the theory

2
00:00:03,060 --> 00:00:06,560
behind block and inline elements.

3
00:00:06,560 --> 00:00:09,600
If we look at these elements in our project here,

4
00:00:09,600 --> 00:00:12,130
we saw that we have both on our page here,

5
00:00:12,130 --> 00:00:16,570
here in the header, we have an h1 element, paragraph,

6
00:00:16,570 --> 00:00:19,260
both block elements, and this anchor tag,

7
00:00:19,260 --> 00:00:21,210
which is an inline element.

8
00:00:21,210 --> 00:00:24,510
And if I would add a second anchor tag,

9
00:00:24,510 --> 00:00:27,780
here, duplicating this, and saving it,

10
00:00:27,780 --> 00:00:29,810
well, you'll see that these are displayed

11
00:00:29,810 --> 00:00:30,930
next to each other,

12
00:00:30,930 --> 00:00:34,130
so each block element occupies the entire width,

13
00:00:34,130 --> 00:00:36,910
or the whole line, so to say.

14
00:00:36,910 --> 00:00:38,960
For anchor tags, this is not the case,

15
00:00:38,960 --> 00:00:40,800
these just required a space,

16
00:00:40,800 --> 00:00:43,420
well, they need to be displayed.

17
00:00:43,420 --> 00:00:46,683
Here, we can, of course, get rid of the second anchor tag.

18
00:00:48,000 --> 00:00:49,900
And with that, we have our style back.

19
00:00:50,790 --> 00:00:52,740
By the way, the reason why this anchor tag

20
00:00:52,740 --> 00:00:55,410
and this inline element is displayed in a new line

21
00:00:55,410 --> 00:00:58,910
is because the paragraph before is a block element,

22
00:00:58,910 --> 00:01:01,733
therefore, the next element is also in a new line.

23
00:01:02,670 --> 00:01:04,940
However, there are some more things to consider

24
00:01:04,940 --> 00:01:08,440
when working with block and inline elements.

25
00:01:08,440 --> 00:01:11,090
If we look at our header element here,

26
00:01:11,090 --> 00:01:14,250
the header is the parent of all these three elements

27
00:01:14,250 --> 00:01:15,680
I just talked about.

28
00:01:15,680 --> 00:01:17,870
You see that the content of the header,

29
00:01:17,870 --> 00:01:21,713
So the blue part, does not contain all elements,

30
00:01:22,590 --> 00:01:25,200
it kind of cuts off our anchor tag,

31
00:01:25,200 --> 00:01:28,063
our button with the "View Today's Challenge" text.

32
00:01:29,000 --> 00:01:32,573
Specifically, it cuts off the button at a certain point.

33
00:01:33,790 --> 00:01:35,370
If we go to the button,

34
00:01:35,370 --> 00:01:37,790
you see that here, "View Today's Challenge,"

35
00:01:37,790 --> 00:01:42,400
the text, is the actual content of that anchor tag.

36
00:01:42,400 --> 00:01:45,710
And that's where the content is also cut off here

37
00:01:45,710 --> 00:01:47,393
in our header element.

38
00:01:48,230 --> 00:01:51,630
Now this is happening because for inline elements,

39
00:01:51,630 --> 00:01:53,850
we have certain special rules

40
00:01:53,850 --> 00:01:57,210
when it comes to applying the padding, top or bottom,

41
00:01:57,210 --> 00:02:00,133
or a margin, also top or bottom.

42
00:02:01,980 --> 00:02:04,473
Let's get started with the margin maybe.

43
00:02:05,440 --> 00:02:08,639
In our code, we go to the full-week.css file

44
00:02:09,690 --> 00:02:11,553
and here to our anchor tag.

45
00:02:12,640 --> 00:02:15,470
At the moment, no margin is added,

46
00:02:15,470 --> 00:02:18,400
and if I would add a margin now,

47
00:02:18,400 --> 00:02:22,180
like this maybe, and we add a top and bottom margin

48
00:02:22,180 --> 00:02:26,943
of maybe 30 pixels and of zero for the left and the right,

49
00:02:28,390 --> 00:02:31,160
if we do this, nothing changes.

50
00:02:31,160 --> 00:02:33,360
We see that in our anchor tag here,

51
00:02:33,360 --> 00:02:36,230
that this margin property was applied,

52
00:02:36,230 --> 00:02:38,460
but it doesn't have an impact.

53
00:02:38,460 --> 00:02:42,290
We can also scroll down here to see our box model,

54
00:02:42,290 --> 00:02:44,960
where the margin is actually displayed.

55
00:02:44,960 --> 00:02:47,770
So there should be a margin, but in the real world,

56
00:02:47,770 --> 00:02:50,760
as you see it, it doesn't have any effect here.

57
00:02:50,760 --> 00:02:51,853
It's not displayed.

58
00:02:52,920 --> 00:02:56,370
If I would go back and also add a left and right margin,

59
00:02:56,370 --> 00:02:57,803
maybe of 12 pixels,

60
00:02:59,650 --> 00:03:00,730
this would be displayed.

61
00:03:00,730 --> 00:03:02,450
You see the orange part here?

62
00:03:02,450 --> 00:03:04,750
Because left and right margins

63
00:03:04,750 --> 00:03:06,930
can be added to inline elements,

64
00:03:06,930 --> 00:03:09,200
which kind of makes sense as inline elements

65
00:03:09,200 --> 00:03:12,770
are placed next to each other in the same line.

66
00:03:12,770 --> 00:03:15,863
Whereas top and bottom margins simply do not work.

67
00:03:17,080 --> 00:03:18,830
That's one thing to keep in mind here,

68
00:03:18,830 --> 00:03:19,950
and that's also the reason

69
00:03:19,950 --> 00:03:22,130
why the distance between our two elements here

70
00:03:22,130 --> 00:03:24,630
was added with this paragraph here.

71
00:03:24,630 --> 00:03:28,110
However, also in this paragraph, in the margin,

72
00:03:28,110 --> 00:03:29,540
we see that the margin again,

73
00:03:29,540 --> 00:03:33,210
kind of overflows the button, so to say.

74
00:03:33,210 --> 00:03:38,210
It again ends at the content of our anchor tag here,

75
00:03:38,350 --> 00:03:40,020
so kind of the same logic we saw

76
00:03:40,020 --> 00:03:41,743
for the content of the header.

77
00:03:42,859 --> 00:03:45,350
Now, that's the second limitation we have

78
00:03:45,350 --> 00:03:47,823
when it comes to working with inline elements.

79
00:03:48,900 --> 00:03:51,640
Back in our code, we can first delete that margin,

80
00:03:51,640 --> 00:03:52,920
which is not working,

81
00:03:52,920 --> 00:03:56,080
and now we can focus on to the padding here.

82
00:03:56,080 --> 00:03:59,300
We added a padding of 12 pixels to our element,

83
00:03:59,300 --> 00:04:01,833
and I will change this now to zero pixels here.

84
00:04:03,090 --> 00:04:06,350
Going back, you see that our button of course changed,

85
00:04:06,350 --> 00:04:08,990
no padding is added anymore.

86
00:04:08,990 --> 00:04:11,820
And if we now go to our paragraph,

87
00:04:11,820 --> 00:04:15,120
you see that now the bottom margin of this paragraph

88
00:04:15,120 --> 00:04:18,640
exactly ends where the button begins, so to say,

89
00:04:18,640 --> 00:04:20,483
because we didn't add any padding.

90
00:04:21,839 --> 00:04:24,690
Same logic applies to our header.

91
00:04:24,690 --> 00:04:27,000
Here, the content of the header element

92
00:04:27,000 --> 00:04:31,190
now exactly contains the content of our anchor tag,

93
00:04:31,190 --> 00:04:33,273
the padding was ignored somehow.

94
00:04:35,390 --> 00:04:38,110
We can't even play this a bit further.

95
00:04:38,110 --> 00:04:41,310
For our paragraph, we have a big bottom margin here,

96
00:04:41,310 --> 00:04:42,233
as we can see it.

97
00:04:43,550 --> 00:04:46,560
That's this bottom margin we have right here.

98
00:04:46,560 --> 00:04:49,260
If we quickly remove any margin

99
00:04:49,260 --> 00:04:52,763
from our description ID here,

100
00:04:53,880 --> 00:04:55,020
like this,

101
00:04:55,020 --> 00:04:57,600
you see that the paragraph and the anchor tag

102
00:04:57,600 --> 00:04:59,913
are displayed one after another.

103
00:05:00,810 --> 00:05:03,910
Now, if we go back to the anchor tag

104
00:05:03,910 --> 00:05:06,040
and bring back some padding,

105
00:05:06,040 --> 00:05:09,363
some top and bottom padding of 12 pixels here,

106
00:05:10,350 --> 00:05:12,570
then the padding is added.

107
00:05:12,570 --> 00:05:13,940
But as you'll see the button now

108
00:05:13,940 --> 00:05:18,053
kind of hides the previously displayed paragraph.

109
00:05:19,090 --> 00:05:22,350
Now this is happening because top and bottom padding

110
00:05:22,350 --> 00:05:24,430
can be added to inline elements,

111
00:05:24,430 --> 00:05:28,450
but this padding does not move other elements up.

112
00:05:28,450 --> 00:05:33,450
If we go back to our code, and set this back to zero,

113
00:05:34,690 --> 00:05:38,790
and instead add the padding here to our description,

114
00:05:38,790 --> 00:05:40,370
so let's say padding bottom,

115
00:05:40,370 --> 00:05:42,773
maybe 50 pixels to make it really clear.

116
00:05:43,920 --> 00:05:47,610
If we do that, you see that this padding we added,

117
00:05:47,610 --> 00:05:48,443
this one here,

118
00:05:48,443 --> 00:05:51,670
is now moving down the next element,

119
00:05:51,670 --> 00:05:53,550
because the padding defines the distance

120
00:05:53,550 --> 00:05:57,780
between the content and the border of our element.

121
00:05:57,780 --> 00:05:58,613
But with that,

122
00:05:58,613 --> 00:06:01,020
the element gets bigger and therefore other elements,

123
00:06:01,020 --> 00:06:03,080
following elements, or previous elements

124
00:06:03,080 --> 00:06:04,513
are pushed up or down.

125
00:06:05,540 --> 00:06:08,370
This is not the case for our inline element though,

126
00:06:08,370 --> 00:06:10,363
as we saw it, so we can delete this.

127
00:06:12,130 --> 00:06:14,260
Now the question is, "What can we do here?"

128
00:06:14,260 --> 00:06:17,070
Let's first add our padding maybe,

129
00:06:17,070 --> 00:06:18,770
like this, to make it look better.

130
00:06:20,030 --> 00:06:22,040
And how can we fix this now?

131
00:06:22,040 --> 00:06:24,910
Well, we could of course, add a margin here,

132
00:06:24,910 --> 00:06:27,543
maybe of, I don't know, 20 pixels,

133
00:06:28,700 --> 00:06:30,970
and then play around to get the right distance.

134
00:06:30,970 --> 00:06:32,290
But then we again have this issue

135
00:06:32,290 --> 00:06:36,440
that the content is not covering the entire elements inside,

136
00:06:36,440 --> 00:06:38,483
so it's not what I would recommend here.

137
00:06:39,930 --> 00:06:42,000
Instead, we have another, well, trick,

138
00:06:42,000 --> 00:06:43,450
which kind of helps us here,

139
00:06:43,450 --> 00:06:45,803
and this is the display property.

140
00:06:47,490 --> 00:06:50,350
The display property, which can be added here,

141
00:06:50,350 --> 00:06:52,717
written like this, so simply "display,"

142
00:06:54,210 --> 00:06:58,430
and this property now allows us to define the way

143
00:06:58,430 --> 00:07:00,590
our elements are displayed

144
00:07:00,590 --> 00:07:03,043
and which ways do we have to display elements?

145
00:07:04,150 --> 00:07:07,720
Well, one way here would be display inline,

146
00:07:07,720 --> 00:07:08,620
so this would just mean

147
00:07:08,620 --> 00:07:11,610
that this element should be displayed as an inline element.

148
00:07:11,610 --> 00:07:13,540
Well, the anchor tag is an inline element,

149
00:07:13,540 --> 00:07:15,193
therefore, no difference here.

150
00:07:16,748 --> 00:07:19,180
And let's maybe set this margin here to zero,

151
00:07:19,180 --> 00:07:22,320
for the moment, to have this better visible,

152
00:07:22,320 --> 00:07:24,650
so this doesn't change a thing.

153
00:07:24,650 --> 00:07:28,443
We could change this element to a block element,

154
00:07:29,290 --> 00:07:32,210
with that, it would behave like a block element,

155
00:07:32,210 --> 00:07:34,210
and as can be seen, the text is now visible

156
00:07:34,210 --> 00:07:37,870
and the next element is occupying the entire space

157
00:07:37,870 --> 00:07:40,803
of the next line, as we didn't define a width here.

158
00:07:41,880 --> 00:07:46,880
Or we can use another value, which is called "inline-block."

159
00:07:48,350 --> 00:07:51,280
Now "inline-block" kind of combines both worlds,

160
00:07:51,280 --> 00:07:52,290
so to say.

161
00:07:52,290 --> 00:07:53,440
We have an inline element,

162
00:07:53,440 --> 00:07:55,740
which can be displayed in the same line,

163
00:07:55,740 --> 00:07:58,730
so not in a new line as block elements,

164
00:07:58,730 --> 00:08:02,320
and we are able to apply top and bottom margins

165
00:08:02,320 --> 00:08:04,370
and top and bottom padding,

166
00:08:04,370 --> 00:08:08,220
which now affects the distance to other elements.

167
00:08:08,220 --> 00:08:10,010
With that, as can be seen,

168
00:08:10,010 --> 00:08:14,160
we now have the space defined for our inline element,

169
00:08:14,160 --> 00:08:17,550
so defined by our content and the padding,

170
00:08:17,550 --> 00:08:18,883
as we can see it here.

171
00:08:19,720 --> 00:08:23,210
And we also have the top and bottom padding

172
00:08:23,210 --> 00:08:26,623
affecting the distance to our previous element here.

173
00:08:28,110 --> 00:08:31,000
Besides that, we can now also add a margin,

174
00:08:31,000 --> 00:08:34,510
if we want to maybe just 12 pixels,

175
00:08:34,510 --> 00:08:36,033
and zero left right.

176
00:08:37,330 --> 00:08:40,340
If we do that, you see, now the margin was added,

177
00:08:40,340 --> 00:08:42,690
and also has an effect on the distance

178
00:08:42,690 --> 00:08:44,333
to the other element.

179
00:08:45,900 --> 00:08:48,140
Besides that, if we go to our header now,

180
00:08:48,140 --> 00:08:51,760
you see that the content ends with all elements,

181
00:08:51,760 --> 00:08:54,593
which are part of our header element here.

182
00:08:55,570 --> 00:08:58,010
So these are some core things to keep in mind,

183
00:08:58,010 --> 00:09:00,020
block versus inline elements,

184
00:09:00,020 --> 00:09:02,330
inline elements have limitations

185
00:09:02,330 --> 00:09:05,993
when it comes to top and bottom margins or padding,

186
00:09:06,900 --> 00:09:10,180
which can be overcome with the inline block element,

187
00:09:10,180 --> 00:09:11,870
so we use the display property,

188
00:09:11,870 --> 00:09:14,113
and change the value to inline block.