📜  Tailwind CSS 边距

📅  最后修改于: 2022-05-13 01:56:29.733000             🧑  作者: Mango

Tailwind CSS 边距

此类接受 tailwind CSS 中的许多值,其中所有属性都像类形式一样被覆盖。它是 CSS Margin 属性的替代方案。此类用于在元素周围创建空间,在任何定义的边界之外。我们可以为各个边(上、右、下、左)设置不同的边距。添加边框属性以实现边距类很重要。有很多用于边距的 CSS 属性,例如 CSS padding-top 、 CSS padding-bottom 、 CSS padding-right 、 CSS padding-left等。

保证金等级:

  • m-0:该类用于定义所有边的边距。
  • -m-0:该类用于定义所有边的负边距。
  • my-0:此类用于定义 y 轴上的边距,即margin-topmargin-bottom
  • -my-0:该类用于定义 y 轴上的负边距,即margin-topmargin-bottom
  • mx-0:该类用于定义 x 轴上的边距,即margin-leftmargin-right
  • -mx-0:该类用于在右侧添加负边距。
  • mt-0:该类专门用于在顶部添加边距。
  • -mt-0:该类专门用于在顶部添加负边距。
  • mr-0:这个类专门用来在右边添加边距。
  • -mr-0:该类专门用于在右侧添加负边距。
  • mb-0:该类专门用于在底部添加边距。
  • -mb-0:该类专门用于在底部添加负边距。
  • ml-0:该类专门用于在左侧添加边距。
  • -ml-0:该类专门用于在左侧添加负边距。

注意:您可以使用有效的“rem”值更改数字“0”。

m-0:该类用于定义所有边的边距。

句法:

...

例子:

HTML
 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    


HTML
 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    


HTML
 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    


HTML
 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    


HTML
 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    


HTML
 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    


HTML
 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    


HTML
 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    


输出:

-m-0:该类用于定义所有边的负边距。

句法:

...

例子:

HTML

 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    

输出:

my-0:该类用于定义y轴上的边距,即margin-topmargin-bottom

句法:

...

例子:

HTML

 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    

输出:

-my-0:该类用于定义 y 轴上的负边距,即margin-topmargin-bottom

句法:

...

例子:

HTML

 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    

输出:

mx-0:该类用于定义 x 轴上的边距,即margin-leftmargin-right

句法:

...

例子:

HTML

 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    

输出:

-mx-0:该类用于定义 x 轴上的负边距,即margin-leftmargin-right

句法:

...

例子:

HTML

 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    

输出:

mt-0:该类专门用于在顶部添加边距。

句法:

...

例子:

HTML

 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    

输出:

-mt-0:该类专门用于在顶部添加负边距。

句法:

...

例子:

HTML

 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Margin Class      
    
        
                       
    
    
    

输出: