CSS：理解填充语句

Question

我试图围绕填充声明 - 我已经看到了一些对我有用的东西，但最近我遇到了这个实现：

padding: 30px 0;

现在我理解了第一个参数30px，但0表示什么？

提前致谢！

Answer 1

开发人员不会将填充定义为padding-bottom，padding-right，padding-left或div{ padding : 10px 10px 10px 10px /*top right bottom left*/ } ，而是将其定义如下，

div{
padding : 10px 0px; /*10px is for top and bottom, whereas 0px is for right and left*/  
}

（或）

{{1}}

Answer 2

padding是

的简写属性

• padding-top
• padding-right
• padding-bottom
• padding-left

它允许多个值：

  

如果只有一个组件值，则它适用于所有方面。如果   有两个值，顶部和底部填充设置为第一个   值和右侧和左侧填充设置为秒。如果有   是三个值，top设置为第一个值，左边和   right设置为第二个，底部设置为第三个。如果   有四个值，它们适用于顶部，右侧，底部和左侧，   分别

因此，padding: 30px 0将padding-top和padding-bottom设置为30px，将padding-right和padding-left设置为0

Answer 3

所以，这是它的工作原理：

如果padding属性有四个值：

25px

顶部填充为50px，右侧填充为75px，底部填充为100px，左侧填充为padding: 25px 50px 75px; 。

如果padding属性有三个值：

25px

顶部填充为50px，左右填充为75px，底部填充为padding: 25px 50px; 。

如果padding属性有两个值：

25px

顶部和底部填充为50px，左右填充为padding: 25px; 。

如果padding属性有一个值：

25px

所有四个填充都是@Named public class LoggerProducer{ @Produces @BpeLogger public Logger produceLogger(InjectionPoint injectionPoint) { return LoggerFactory.getLogger(injectionPoint.getMember().getDeclaringClass().getName()); } } 。