CSS填充速记混乱

Question

padding:45px 65px 95px;

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

这对我来说有点混乱.

Answer 1

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

Answer 2

顺序是：上、右、下、左

想想TRBL（麻烦）。或顺时针方向。

使用速记时，如果未给出，则使用对方的值。在你的情况下，使用65pxfor left和65pxfrom right。

更进一步，如果我有：

padding: 10px 20px;

将导致10px顶部和底部以及右侧和左侧。20px

最后：

padding: 10px;

所有内容的结果都是 10px。