入门 CSS 方向填充

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）基础的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。

填充用于在任何定义的边框内围绕元素创建空间。 Primer CSS 中有不同类型的填充，例如速记填充、统一填充、定向填充、扩展定向填充、响应式填充等等。在本文中，我们将讨论 Primer CSS 中的方向填充。

定向填充使用定向实用程序将填充应用于单个边，或元素的 X 和 Y 轴。定向实用程序可以更改或覆盖默认填充，并且可以与 0-6 的间距比例一起使用。

Primer CSS Directional padding 使用的类：

• .pt-(0-6)：此类用于在容器顶部创建填充。
• .pr-(0-6)：该类用于在容器右侧创建填充。
• .pb-(0-6)：该类用于在容器底部创建填充。
• .pl-(0-6)：该类用于在容器左侧创建填充。
• .py-(0-6)：该类用于在容器的顶部和底部创建填充。
• .px-(0-6)：该类用于在容器的左右创建内边距。

句法：

    ...

示例 1：此示例演示 Primer CSS 中的顶部、底部、左侧和右侧填充类。

HTML

  

    
    

  

    
        
GeeksforGeeks
        Primer CSS Directional Padding
        

        

            
.pt-1
        
  
        

            
.pt-2
        
  
        

            
.pt-3
        
  
        

            
.pt-4
        
  
        

            
.pt-5
        
  
        

            
.pt-6
        
        

        

        

        

            
.pr-1
        
  
        

            
.pr-2
        
  
        

            
.pr-3
        
  
        

            
.pr-4
        
  
        

            
.pr-5
        
  
        

            
.pr-6
        
        

        

        

        

            
.pb-1
        
          
        

            
.pb-2
        
          
        

            
.pb-3
        
          
        

            
.pb-4
        
          
        

            
.pb-5
        
          
        

            
.pb-6
        
        

        

        

        

            
.pl-1
        
          
        

            
.pl-2
        
          
        

            
.pl-3
        
          
        

            
.pl-4
        
          
        

            
.pl-5
        
          
        

            
.pl-6
        
    

  

输出：

输出

示例 2：此示例演示 Primer CSS 中的tx和y 轴填充类。

HTML

  

    
    

  

    
        
GeeksforGeeks
        Primer CSS Directional Padding
        

        

            
.px-1
        
  
        

            
.px-2
        
  
        

            
.px-3
        
  
        

            
.px-4
        
  
        

            
.px-5
        
  
        

            
.px-6
        
        

        

        

        

            
.py-1
        
  
        

            
.py-2
        
  
        

            
.py-3
        
  
        

            
.py-4
        
  
        

            
.py-5
        
  
        

            
.py-6
        
    

  

输出：

输出

参考： https ://primer.style/css/utilities/padding#directional-padding