Inline block elements,
have another special behavior, though.
If you look at our "H1" element here, this one,
you'll see that we have a margin of 12 pixels,
you can see it down here.
If we go back to our code, to the description
and add a margin of maybe 24 pixels here,
a bigger one, if we do that, What's happening here?
Well, we have a margin of 12 pixels here actually
for our "H1" element. And for the paragraph,
we have the margin of 24 pixels.
But if you look at the margin that is used in the end,
Can you see it?
Here, this margin ends slightly below the "G" of "Upcoming",
sort to say, and this margin here,
begins below that "G".
what that simply means, is that the margin
in between these two elements,
is simply 24 pixels.
So the 12 pixels here for our bottom margin
for the "H1" element is simply ignored.
If I will change the margin here to 8 pixels
for our description,
like this,
then it would be different.
Here, We now see that the bottom margin here,
ends with the content of our paragraph,
and the margin of the paragraph
is also part of this margin. Can you see it?
So, the margin between these two elements,
is now defined by this 12 pixel margin.
So, these are two block elements
where this is happening, here for the paragraph,
we again have our 8 pixel margin,
but here; the 12 pixels for the anchor tag, some are added.
So we have 8 pixels, and then we have 12 pixels.
So the distance between these two elements is 20 pixels.
Here the distance, is 12 pixels,
defined by the "H1", not 20 pixels.
The behavior we see here between
our adjacent elements, it's important.
This only happens between adjacent elements,
this is called margin collapsing,
because well, margins collapse here in a way
that we define a margin for the "H1" element,
here, for example; the 12 pixels,
and for the following paragraph.
But we define the margin of 8 pixels.
In such cases, well...
The larger margin wins. Sort to say.
Margin collapsing only occurs for vertical margins.
So for horizontal margins, we don't have this issue,
and only happens for block elements.
Why is this the case?
Well, because for inline elements,
we cannot apply vertical margins.
We talked about this already,
and for inline block elements.
So elements with the display inline block rule applied,
well, margin collapsing, simply isn't an issue.
You'll see it here between the paragraph and the anchor tag,
which has the display inline block rule applied,
the margin collapsing is not the case.
So here we have the distance of 8 pixels
for the bottom margin, and additionally,
we have 12 pixels for the top margin
for our anchor tag here.
Now, why is margin collapsing existing?
Well, I think it becomes evident
if we look at our main section
here and look into our order list,.
Because here, between our list items,
we have the same logic.
We have a margin of 32 pixels top and bottom,
as can be seen here.
And as you see already in the left part,
in our DevTools, if we use these,
we only have the 32 pixel margin
between each single list item.
Although, each list item itself,
has a margin of 32 pixels applied,
as can be seen right here.
If you think about that a bit more,
it makes sense that this margin collapsing happens here.
Because if you add a margin of 42 pixels,
you probably want to have a distance of this 42 pixels
between your elements and not 64 pixels.
This will simply be too big, for example.
So, these are actually all the basics
you have to keep in mind
when it comes to margin collapsing.
It happens between adjacent elements,
it only affects vertical margins,
and therefore, it kind of simply defines
that the bigger margin defined
between two following elements wins,
in such cases when it comes
to defining the distance,
the margin between these two elements.