I type exactly what is required in step 17, but my question is: why doesn’t setting margin-bottom: 20px; change the space between the element and the elements?
Then, when I move on to Step 18:
Again, I set margin-top: 20px; but the distance between those elements don´t change either?
Could someone explain why this happens, and what the purpose is of setting margins with the same value if the visual spacing doesn’t change? Or is this possible an issue with my browser?
There is a concept in css called ‘collapsing margins’. This concept is the reason you do not visibly see the effect of adding a margin-top of 20px to .card-links.
The element above the .card-links is the .message. It has a bottom margin of 20px.
The browser notices that the previous (higher) element has 20px bottom margin and that your .class-links element also wants a top margin of 20px so it analyzes that and decides that what you really want is exactly 20px in between the two elements (not 20px + 20px = 40px).
So it ‘collapses’ the margin values.
