@karolbanat
Posted
Hi @Shha5. Good job completing this challenge 🎉.
About your question: the space that appears when you remove the border from the body is because of the (vertical) margin you set on .container (15vh in magin: 15vh 24vh 15vh 24vh). It, if I am correct, is called collapsing margins. The border you set on body acts like a 'cushion' for margin on .container and it doesn't 'leave' the body. But if you remove the border, you remove that 'cushion', and then that margin escapes body and is causing body to shift too. You can see that if you change border into outline property and give it colour (for example instead of border: 1px solid transparent set outline: 1px solid firebrick). Outline doesn't count into box model so it won't affect collapsing margins. And because your body has minimal height set to 100vh (min-height: 100vh), it's like body has height of 115vh (100vh (body) + 15vh (leaking margin on top)). And this is the cause of that space [inspect the margins on container in dev tools after setting outline).
In your case removing min-height from body will remove that problem. But it will still move the body.
Also I would recommend not relaying on viewport units too much.
It's a lot to explain so I don't know if i did it right. Hope it helps.
And here is link to Kevin Powell's video about collapsing margins.
And once again, congratulations on completing this challenge and happy coding. 😊
Marked as helpful
