如何应用 CSS Padding Shorthand 属性？

填充是元素与其边框之间的空间。 padding 的速记属性设置元素所有四个边的填充区域。填充值可以是 px、em、rem 或 %。如果我们想在特定的一侧应用填充，我们可以使用以下属性：

• padding-left：在元素的左侧设置填充。
• padding-right：在元素的右侧设置填充。
• padding-top：在元素的顶部设置填充。
• padding-bottom：在元素的底部设置填充。

句法：

padding: value;

不同的垂直和水平填充：

padding: value1 value2;

1. value1：设置元素顶部和底部的填充值。
2. value2：设置元素左右两边的填充值。

不同的顶部、水平和底部填充：

padding: value1 value2 value3;

1. value1：在元素的顶部设置填充。
2. value2：在元素的右侧和左侧设置填充。
3. value3：在元素的底部设置填充。

所有四个边的不同填充：

padding: value1 value2 value3 value4;

1. value1：在元素的顶部设置填充。
2. value2：在元素的右侧设置填充。
3. value3：在元素的底部设置填充。
4. value4：在元素的左侧设置填充。

示例 1：仅填充 1 个值

HTML

    
    
    
    
  


   
 GeeksforGeeks

输出：

示例 2：填充两个值

HTML

    
    
    
    
  


   
 GeeksforGeeks

输出：

示例 3：填充三个值

HTML

    
    
    
    


   
 GeeksforGeeks

输出：

示例 4：用四个值填充

HTML

    
    
    
    
  


   
 GeeksforGeeks

输出：