CSS填充属性设置

CSS填充属性设置有时会令人困惑，因为它可以同时接受1个值，2个值，3个或4个值。

例如，以下所有填充属性设置均有效。

padding: 10px;
padding: 10px 8px;
padding: 10px 8px 10px;
padding: 10px 8px 10px 9px;

CSS填充规则。

1）CSS填充顺序如下：

padding: top  right  bottom left

2）未声明值取自相反侧

CSS填充示例

1）填充：10px 8px 10px 9px;

这四个值很容易理解。

结果是顶部10像素，右侧8像素，底部10像素和左侧9像素

2）内边距：10px 8px;

这两个值也很清楚。 在这里，我们声明顶部为10px，右边为8px。 遵循填充规则– 未声明的值是从相对的一侧获取的 ，“顶部”值将分配给“底部”，“右侧”值也将分配给“左”。

结果是顶部10像素，右侧8像素，底部10像素和左侧8像素

3）padding：10px 8px 10px;

这是最令人困惑的设置。 在这里，我们声明顶部为10px，右侧为8px，底部为10px，请遵循填充规则– 未声明的值是从相反的一侧获取的 ，“ Right”值将分配给“ Left”。

结果是顶部10px，右侧8px，底部10px和左侧8px

4）填充：10px；

此属性设置有些特殊，该设置将应用于所有上，右，下和左值。

结果是顶部10像素，右侧10像素，底部10像素和左侧10像素

结论

实际上，完成这一行CSS填充属性设置的另一种方法是使用
1）顶部填充：
2）向右填充：
3）底部填充：
4）向左填充：

例如，

padding: 10px 8px 10px 9px;

相当于

padding-top:10px; 
padding-right:8px;
padding-bottom:10px;
padding-left:9px;

我更喜欢多行CSS填充属性设置（例如padding-top或padding-right），代码干净且易于维护。 为什么这么多的Web开发人员想要使事情变得复杂？ 一线填充属性会使它更专业吗？

标签： CSS

翻译自: https://mkyong.com/css/css-padding-property-setting-unofficial-guide/