It actually does have a margin on the top, but the margin is above, in the white area. You could give .canvas a display of relative and then give .one a display of absolute. (although you will have to use flex box to display .one in the center again)
The white area is the frame’s box but .one is directely inside the canvas’ box so its margin should be between its border and the canvas border right? As you said, it does not
When I want to understand the behaviour of elements, I like to use a 1px border on the HTML document so I can get a sense to where elements really are.
using ‘right mouse click’ on the element and ‘inspect’ lets me see the box model highlighted in my browser. (not all browsers are the same)
I encourage you to take a look at your own browsers dev tools to see how the elements are behaving.
You will learn much more from experimenting with them, than I could ever teach you