For the children,
we have one bigger task in here,
and that was the second challenge
you had to overcome in here and that's the image.
Let's get started easily
by adding a border to the image maybe
because we have a border around the main element,
so I think it greatly fits in
if we also add one to the image.
Nothing easier than that.
We apply the border property
and now add a border with five pixels,
maybe solid one and an RGB code
of 44,
44
and 44.
So that was the easier part.
But now if you remember the finished result I showed you,
this image here should be placed above this border,
this top border of our main element
and this should basically go through here.
I mentioned that we can achieve this with margins,
specifically negative margins,
and even more specific, a top margin.
Now, before we apply this, some things to know.
We cannot apply vertical margins to inline elements.
That's what we learned in this module,
and this is correct, of course,
but there is an exception here.
We have two different types of inline elements.
We have replaced and non-replaced inline elements.
Without diving too deep here,
a non-replaced inline element is, for example,
our anchor tag, this one here.
That's also the element type
and we learned all the things we know about inline elements,
but a replaced inline element is an image
because the element itself is replaced
so to say by the image,
so it links to another page
and retrieves the actual content from there.
And for such inline elements,
vertical margins can be applied.
That's the first important thing to know.
The second important thing is that we can apply
positive margins as we did throughout this course so far
and negative margins.
Why is this important?
Well, because if we can apply margins to our element here,
to the image element, then we could say,
okay, let me add a top margin of 10 pixels, for example.
If I do this and check the element,
you see the margin is applied
and the element and all following elements are pushed down.
Now, if I want to move this image up
and also the following elements
should, of course, be moved up,
then why not giving a negative margin a try here
of maybe 20 pixels?
And as you see, now the image has moved up
and also all the other elements because we now say
we don't want have a margin of zero, for example.
This would be zero.
And if we inspect it,
we see we have our image element here with the border
and this border ends with the padding of the main element,
so that would be zero.
And with the negative margin,
we can then basically go into the padding and the border
and the margin of our main element.
Now, sounds a bit cryptic here, but if we follow this logic,
then we see that we have
a padding of 24 pixels and a border of five pixels.
And if my logic is correct,
then if we add a margin top of minus 29 pixels,
then we should be exactly in line
with the border of our main element.
And as it turns out, this is the case.
So if I zoom in a bit here,
you see that we are now exactly
at the top of our border of the main element.
Now the only thing we need to do now if this border
should basically divide our image into two halves
is to take the height of our element, which is 210 pixels,
200 height for the content
plus five for the border top and bottom.
Well, this would mean we have 210
divided by two, two halves,
and this would mean we just add 105 to our 29 here,
so minus 29, minus 105,
which would be minus 100,
and oops, minus 134 pixels.
And if we do that, you see we achieved this goal.
If you were unsuccessful here,
no worries, this was a tricky one,
but I also wanted to show you this
towards the end of this module
as it combines a few more concepts we learned
and therefore is a bit more advanced.
The great thing is
that this was the last core challenge of this project.
This means in the next lectures,
we'll finally finish this page together
and then I'll summarize what we learned in this module.