How to understand how padding works?

Question

Sass

Having started to delve into css in my free time, I immediately ran into a problem that I don’t understand.
padding - from their help and pictures, I realized that this is just an indent, but in reality it turned out to be not easy. For you to understand what I'm talking about, I made an example on codepen. Here's an example that shows how a sub-menu (the one with an asterisk initial name) pushes back the main menu (the third item in the main menu that starts with a plus sign). Everything seems to be clear here, each item has a padding of 15px + the size of the text itself, and this is how the size of one menu segment is formed. Everything seems to fit into what is written on the Internet.
But here's how to do the same without padding by setting the width and height?
When I set the width to 200px and the height to 50px, the behavior is not like that at all (I don't take into account the shift of the text, I don't care). The menu items are out of order. Why? Why is padding not just indentation?

Answer 1

I didn’t really delve into this layout, but I can only say that if there was box-sizing: border-box, your life would be much easier