padding-left和padding-start有什么区别?

时间:2013-10-25 06:51:24

标签: html html5 css3 webkit mozilla

在检查某些代码时,我发现了这个新声明:-webkit-padding-start但我无法理解现有padding-left属性的区别。 我已经在Mozilla Developers上阅读了该页面并创建了fiddle,但我仍然不确定。

3 个答案:

答案 0 :(得分:10)

除了-webkit-padding-start非标准之外,不同之处在于当写入方向从右到左时,-webkit-padding-start将填充放到右边(实际上,转换为padding-right)。

如果属性是标准化的,那么对于用于包含不同书写系统中的文本的文档的样式表将是有用的。然后,您可以在文本开头添加填充,前提是您已在HTML中设置dir属性或在CSS中设置direction属性以正确对应方向性。因此填充将位于文本开头的左侧,例如在西方语言中,但在文本开头右侧(从右到左),例如用阿拉伯语,波斯语或希伯来语文本。

答案 1 :(得分:3)

  

如果书写方向是从左到右,-webkit-padding-start overrides padding-left。如果书写方向是从右到左,   -webkit-padding-start overrides padding-right

源:CSS-Info

答案 2 :(得分:2)

如果计算出的方向是从左到右ltr,则-moz-padding-start设置left-padding:;,否则设置right-padding:;

例如:

<强> HTML:

<p><a class="left">padding-start: 20px (ltr)</a>
</p>
<p><a class="right">padding-start: 20px (rtl)</a>
</p>

<强> CSS:

    .left {
        direction: ltr;
        border: 1px solid #000;
        -moz-padding-start : 20px;
        -webkit-padding-start : 20px;
    }
    .right {
        direction: rtl;
        border: 1px solid #000;
        -moz-padding-start : 20px;
        -webkit-padding-start : 20px;
    }

DEMO HERE