Почему margin-top зависит от ширины элемента?

Question

[tostershmoster]

codepen

Почему со значениями в классе .range-slider_vertical {}

width: 300px; 
height: 7px;

margin-top для range-slider__thumb_to работает, а с

width: 7px; 
height: 300px;

нет?

в первом случае работает и margin-top и margin-left. причём c margin-top элементы выходит далеко за пределы height: 7px, т.е на такое же расстояние как для width: 300px. во втором случае и для margin-top и для margin-left сдвигается на незначительную величину, видимо эти 7px

если убрать из строки
<div class="range-slider range-slider_vertical">
класс range-slider_vertical, то можно увидеть что в данном случае margin-top работает (хотя в коде тут на самом деле margin-left, этот пример просто для демонстрации того что элемент двигается и при margin-top: 100% и при margin-left: 100% на 300 пикселов а если поменять размеры ширины и длины местами, то в этих двух направлениях двигается только на 7px). Причем если например во втором случае сделать width: 100px, то сдвиг вниз при margin-top: 100% будет уже 100px. Почему? 100% должно равняться 300 пикселам!

Answer 1

[Rsa97]

Для margin размер в процентах всегда считается от ширины родительского блока.
В 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.

В CSS 3

Percentages: refer to logical width of containing block

Comments

[tostershmoster]

интересно было бы увидеть логическое объяснение почему margin-top зависит от ширины а не от высоты.

[Rsa97]

tostershmoster, Потому что в большинстве случаев ширина дочерних элементов определяется шириной родительского контейнера, а вот с высотой всё наоборот, высота контейнера определяется суммарной высотой вложенных в него блоков.
Если брать padding как процент от высоты контейнера, то получаем рекурсию - добавление/удаление элемента приводит к изменению высоты контейнера, что меняет padding вложенных блоков, что, в свою очередь, меняет высоту контейнера, и так по кругу.

[Collonil Tolli]

tostershmoster, не стоит записывать margin в %, есть куча единиц измерения, которые для этого больше подойдут

[tostershmoster]

Collonil Tolli, например.
У меня эти марджины выставлялись для слайдера, т.е всю его шкалу я взял за 100% тогда мне казалось это удобным. Какие для этого случая можно использовать единицы измерения? Сейчас я склоняюсь к пикселам. Но там появилась другая проблемма, например, шкала слайдера от 0 до 2000 а длинна сдайдера, например 400px. Т.е цена деления 400 / 1500. Получается не очень хорошее число..

[Collonil Tolli]

em, rem, vw, vh
В % margin не стоит указывать из-за того что браузер может не верно высчитывать эти %

[tostershmoster]

Collonil Tolli, и как это использовать для слайдера? vw и vh рассчитывается от размеров экрана, em и rem от шрифта.