The block pushes the entire section, instead of itself (margin-top), what should I do?

Question

css

Here is the link to the sandbox, help who can: https://codepen.io/velineeyt-gmail-com/pen/RwVRYdG

Answer 1

If you do not want to google and think, then there are several solutions.
1. Set the border for the outer block (.black)
2. Set the padding for the outer block (can be 1px)
3. Create a new flow (context) inside the outer block (to be honest, I forgot what it's called) / A new context is created if you set overflow different from visible, inside flex and grid containers, inside tables, inside floating elements (float) and maybe I forgot something else.
4. Use padding instead of margin for inner element.
5. Do not use margin on the inner element, and replace it with padding on the outer.
etc.