Итак, название свойства margin-left кажется логически верным, но Мануель Рего Касасновас (Manuel Rego Casasnovas) имеет по этому поводу другое (как оказалось, объективное) мнение. Так, например, иногда появляется необходимость разместить контент не слева направо, а справа налево, при этом отступы, находящиеся физически справа, будут иметь смысловое значение левых отступов. Как результат, для некоторых элементов придется поменять местами значения margin-right и margin-left.

Со временем мы понимаем, что направление контента, используемый язык и даже особенности модели flexbox могут абсолютно изменить смысловые значения названий CSS-свойств и сделать их понимание неоправданно трудным. Именно поэтому появились логические свойства, например: margin-inline-start.

Полный список таких свойств выглядит так:

1. margin-{block,inline}-{start,end}
2. padding-{block,inline}-{start,end}
3. border-{block,inline}-{start,end}-{width,style,color}

Эти свойства поддерживаются последними версиями популярных браузеров за исключением продуктов Microsoft.

Такой подход позволяет перейти от мысленного желания уместить любой контент в физический экран с началом координат в левом верхнем углу, к логическому осмыслению верстки, не зависящему от направления текста, языка или размеров родительского контейнера.

Ниже находится таблица сопоставления классических и логических CSS-свойств:

Margin

Padding

Border

Абсолютное позиционирование

Спасибо за внимание.