入门 CSS 统一边距

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

在本文中，我们将看到Primer CSS Uniform Margins 。 Primer CSS 提供的 Margin 实用程序可帮助开发人员编写更少的自定义 CSS，并有助于使用相同的样式实现许多不同的页面布局。统一边距实用程序用于对元素的所有边应用相等的边距。统一边距实用程序会覆盖默认边距，并且可以与 0 到 6 的间距比例一起使用。

入门 CSS 统一边距类：

• m-0：此类用于重置元素的任何默认边距。
• m-1：该类用于在元素的所有边上设置比例为 1 的边距。
• m-2：该类用于在元素的所有边上设置比例尺 2 的边距。
• m-3：该类用于设置元素四边的比例为3的边距。
• m-4：该类用于设置元素四边的比例为4的边距。
• m-5：该类用于设置元素所有边的比例为 5 的边距。
• m-6：该类用于在元素的所有边上设置比例为 6 的边距。

句法：

   ...

示例 1：下面的示例显示了上面列出的统一边距等级的使用。

HTML

  

    
    
      
    

  

    

        
GeeksforGeeks
        
Primer CSS - Uniform Margin
    
    

        

            

                m-6
            
        
  
        

            

                m-5
            
        
  
        

            

                m-4
            
        
  
        

            

                m-3
            
        
  
        

            

                m-2
            
        
  
        

            

                m-1
            
        
  
        

            

                m-0
            
        
    

  

输出：

入门 CSS 统一边距

示例 2：下面的示例显示了使用统一边距类如何覆盖元素上的默认或预先应用的边距。

HTML

  

    
    
  
    

  

    

        
GeeksforGeeks
        
Primer CSS - Uniform Margin
    
  
    

        
Element without uniform margin class:
        

            

                m-6
            
        
  
        
Element with uniform margin class:
        

            
            

                m-6
            
        
    

  

输出：

入门 CSS 统一边距

参考： https://primer.style/css/utilities/margin#uniform-margins