padding-left, margin-left，left以及padding-inline-start都能在一定的情况下起到令元素由左向右位移的效果(靠左距离)。
在这里padding-left（内边距）和margin-left （外边距）可以直接从console里的box model反映出。给左内边距padding-left 30像素，左外边距margin-left 20像素 - 如下图所示
<html>
<head>
<style>
.body{
padding-left: 30px;
margin-left: 20px;
}
.test{
width: 100px;
height: 100px;
background: slateblue;
}
</style>
</head>
<body>
<div class="body">
<div class="test"></div>
</div>
</body>
</html>
left在一般情况下无法使用。如果对上述的 .body div 里直接设置left的话，box model不会发生任何改变。但如果对 .body设置绝对定位（position absolute）的话，则会在外边距以外形成靠左距离。在 .body 里添加了position：absolute以及left：40px
添加位置与left后的body：
.body{
padding-left: 30px;
margin-left: 20px;
position: absolute;
left: 40px;
}
padding-inline-start的作用取决于inline的方向。如果是由左向右的水平（horizontal）方向，则会overwrite padding-left之前设定的值。假设在之前代码的基础上加入padding-inline-start: 50px，box model的左内边距会由30变成50：
.body{
padding-left: 30px;
margin-left: 20px;
position: absolute;
left: 40px;
padding-inline-start: 50px;
}
在其他情况下，padding-inline-start有可能会起到padding-top，padding-right，或者padding-bottom的作用。这些取决于writing-mode, direction, and text-orientation.
以下是从MDN搬来的事例：
我扳指头数了数，IE浏览器下的关键字值多达11个，正好可以组个足球队，
lr-tb
IE7+浏览器支持。初始值。内容从左往右(left-right)，从上往下(top-bottom)水平流动，以及下一行水平元素在上一行元素的下面，所有符号都是直立定位。大部分的书写系统都是使用这种布局。
rl-tb
IE7+浏览器支持。内容从右往左(right-left，从上往下(top-bottom)水平流动，以及下一行水平元素在上一行元素的下面，所有符号都是直立定位。这种布局适合从右往左书写的语言，例如阿拉伯语，希伯来语，塔安那文，和叙利亚语。
tb-rl
IE7+浏览器支持。内容从上往下(top-bottom)，从右往左(right-left)垂直流动， 下一个垂直行定位于前一个垂直行的左边，全角符号直立定位，非全角符号(也可以被称作窄拉丁文或者窄假名符号)顺时针方向旋转90°。这种布局多见于东亚排版。
bt-rl
IE7+浏览器支持。内容从下往上(bottom-top)，从右往左(right-left)垂直流动， 下一个垂直行定位于前一个垂直行的左边，全角符号直立定位，非全角符号(也可以被称作窄拉丁文或者窄假名符号)顺时针方向旋转90°。此布局多见于在东亚垂直排版从右往左的文本块上。
tb-lr
IE8+浏览器支持。 内容从上往下(top-bottom)，从左往右(left-right)垂直流动。下一个垂直行在前一个的右边。
bt-lr
IE8+浏览器支持。 内容从下往上(bottom-top)，从左往右(left-right)垂直流动。
lr-bt
IE8+浏览器支持。 内容从下往上(bottom-top)，从左往右(left-right)水平流动。下一个水平行在前一行的上面。
rl-bt
IE8+浏览器支持。内容从下往上(bottom-top)， 从右往左(right-left)水平流动。
lr
IE9+浏览器支持。在SVG和HTML元素上使用。等同于lr-tb.
rl
IE9+浏览器支持。在SVG和HTML元素上使用。等同于rl-tb.
tb
IE9+浏览器支持。在SVG和HTML元素上使用。等同于tb-rl.
各个属性值的表现如下（form微软官网）
CSS direction 属性
div
{
direction: rtl
}
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。
inherit 规定应该从父元素继承 direction 属性的值。