[CSS] padding-left, margin-left,left以及padding-inline-start 的区别

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 属性的值。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章