Why does margin-top depend on the element's width?

Question

css

codepen

Why with values ​​in class .range-slider_vertical {}

width: 300px; 
height: 7px;

margin-top for range-slider__thumb_to works, but with

width: 7px; 
height: 300px;

No?

in the first case, both margin-top and margin-left work. and c margin-top elements goes far beyond height: 7px, i.e. the same distance as for width: 300px. in the second case, both margin-top and margin-left are shifted by an insignificant amount, apparently these 7px

if removed from the line
<div class="range-slider range-slider_vertical">
class range-slider_vertical , you can see that in this case margin-top works (although in the code here it is actually margin-left, this example is just to demonstrate that the element moves with both margin-top: 100% and margin-left : 100% by 300 pixels and if you swap the width and length dimensions in places, then it moves only 7px in these two directions). And if, for example, in the second case, make width: 100px, then the shift down at margin-top: 100% will be already 100px. Why? 100% should equal 300 pixels!

Answer 1

For margin, the percentage size is always calculated from the width of the parent block.
In CSS 2.1

<percentage>
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

In CSS 3

Percentages: refer to logical width of containing block