Let's focus on to our section here and let's get started
with the,
issue. I just mentioned,
you saw that I selected the highlight section here
and there you can see that we have content, right?
And then we have this white space, this blank area.
So this part here below the image,
make sure to check it out.
Can you see it? this white area
you might say, well,
this is some kind of margin from previous section
or anything like this.
Let's check this.
Well, turns out it's not can see this year.
The content of the first section ends,
with the end of the background image.
And then we have, all this white space,
what is this white space now?
what you saw it in a previous lecture,
the white space,
Is the margin of the H-two element.
Now the H two-element is actually the child of the section
and what is going on right here.
But generally,
this is not a new concept.
This again is a margin collapsing-related problem.
So to say,
what's new at this stage here, though,
is that margin collapsing
doesn't only occur between adjacent elements as we saw it.
It also occurs in a parent-child relationship.
As we can see right here,
why is it occurring here?
Well, because we have the parent,
which has no margin or padding applied,
and we have then inside this parent, a child
where we have a margin,
this kind of collapses the margin
and adds this margin that we actually have in the child
to the parent.
You can see the same behavior at the bottom of this element,
by the way,
we have a wide space at the bottom
and this white space is caused by what?
Well,
by the margin that we added
to our unordered list right here.
So that's the same problem.
We have a margin at the bottom,
but no margin or padding for the parent.
Therefore, this is the result.
How can we fix this now?
Well, we can, for example,
simply add some padding to the parent,
with that,
this margin collapsing issue will be solved. Immediately.
Let's do this,
but going back to the code and by creating a new selector
here, the highlights ID.
So, add a section element,
and there, I just add a padding of all around 24 pixels.
If I do that,
you see that the space between the elements changes a bit.
And of course the padding, all of that,
has an impact on to the space we have for our container.
But now,
our first section ends here.
The second one starts directly afterwards with the padding
and inside the elements.
We now have the margin of the H two-element,
and also the margin of the unordered list
is now inside our section,
I can prove this to you. If we scroll down a bit
like this,
you'll see everything is part of the content now.
So this was one thing on a new thing,
I would like to show you here.
So a little bit of a more advanced margin collapsing issue,
which you can solve like this,
besides that,
I'm actually quite happy with the look.
What is missing here though,
is a background color of that section here
let's work on this final adjustment after section
in the next lecture.