CSS填充速记混乱

时间:2012-06-04 14:45:26

标签: css padding

padding:45px 65px 95px;

为什么当左边的填充值没有给出时,上面的简写会将LEFT填充设置为65px?

这对我来说有点混乱。

6 个答案:

答案 0 :(得分:8)

这确实令人困惑,但这只是CSS的作品。如果指定1个值,则将用于所有四个边。如果指定两个,则第一个将是top/bottom填充,第二个将是left/right。因此,当指定三个时,它变为top, left/right, bottom,回显当仅提供两个值时的用法。

答案 1 :(得分:4)

订单是:顶部,右侧,底部,左侧

想想 TRBL (麻烦)。或顺时针。

使用速记时,如果没有给出,则使用相反侧的值。在您的情况下,使用65px65px

进一步说,如果我有:

padding: 10px 20px;

对于 top bottom 以及10px左右会产生20px

最后:

padding: 10px;

一切都会导致10px。

答案 2 :(得分:4)

简写符号总是从相反的值复制缺失的元素。

padding: top right bottom left; 
padding: top right; // bottom = top, left = right
padding: top right bottom; // left = right

答案 3 :(得分:0)

实际上序列是顶部,右侧,底部,左侧。如果只给出两个值,那么top&底部和左边&对。因为你已经给了65px到右边所以它对左边是相同的。

答案 4 :(得分:-3)

它是速记符号,通常只提供2个,而不是3个参数,如:

margin: 0 auto;

这意味着顶部和底部为0,左侧和右侧为自动。

答案 5 :(得分:-3)

订单是顶部,右侧,底部,左侧。省略数字时,它会选择相反的值:

x = t=x, r=x, b=x, l=x
x,y = t=x, r=y, b=x, l=y
x,y,z = t=x, r=y, b=z, l=y