📌  相关文章
📜  如何使用 CSS 设置项目列表之间的垂直空间?

📅  最后修改于: 2021-11-07 08:29:09             🧑  作者: Mango

HTML 中的项目列表可以是多种类型,如有序列表无序列表描述列表。默认情况下,项目列表之间有一个固定的垂直空间。我们可以通过使用不同的 CSS 属性来增加或减少项目列表的垂直间距。在本文中,我们将介绍设置项目列表之间垂直间距的所有可能方法。

CSS line-height 属性:在这个方法中,我们将设置列表项的行高,最终会增加或减少列表项的垂直间距。

  • 句法:
    line-height: normal|number|length|percentage|initial|inherit;
  • 例子:
    
    
      
    
        
        
        
            Using line-height to
            set line-height
        
      
        
      
    
      
    
        
            

    GeeksforGeeks

            

                Using line-height property             to set line height         

            

            
                line-height property effect
                
                      
    • For Geeks
    •                 
    • GeeksforGeeks
    •                 
    • A Computer Science Poratal
    •             
            
            
                No line-height property effect
                
                      
    • For Geeks
    •                 
    • GeeksforGeeks
    •                 
    • A Computer Science Poratal
    •             
            
        
      
  • 输出:

CSS margin-top 属性:我们将应用 margin-top 属性来设置列表项的行高,最终会增加或减少列表项的垂直间距。 CSS margin-bottom属性也可以适用。
注意:您也可以仅使用CSS 边距属性

  • 句法:
    For margin-top
    margin-top: length|auto|initial|inherit|percentage;
    For margin-bottom
    margin-bottom: length|auto|initial|inherit|percentage;
    
  • 例子:
    
    
      
    
        
        
        
            Using margin-top and margin-bottom
            to set line height
        
      
        
      
    
      
    
        
            

    GeeksforGeeks

            

                Using margin-top and margin-bottom             to set line height         

            

            
                margin-top property effect
                
                      
    • For Geeks
    •                 
    • GeeksforGeeks
    •                 
    • A Computer Science Poratal
    •             
            
            
                margin-bottom property effect
                
                      
    • For Geeks
    •                 
    • GeeksforGeeks
    •                 
    • A Computer Science Poratal
    •             
            
        
      
  • 输出:

CSS padding-top 属性:我们将应用 padding-top 属性来设置列表项的行高,最终增加或减少列表项的垂直间距。 CSS padding-bottom 属性也适用。
注意:您也可以仅使用CSS padding 属性

  • 句法:
    For padding-top
    padding-top: length|initial|inherit;
    For padding-bottom
    padding-bottom: length|initial|inherit;
  • 例子:
    
    
      
    
        
        
        
            Using padding-top and padding-bottom
            to set line height
        
      
        
      
    
      
    
        
            

    GeeksforGeeks

            

                Using padding-top and padding-bottom             to set line height         

            

            
                padding-top property effect
                
                      
    • For Geeks
    •                 
    • GeeksforGeeks
    •                 
    • A Computer Science Poratal
    •             
            
            
                padding-bottom property effect
                
                      
    • For Geeks
    •                 
    • GeeksforGeeks
    •                 
    • A Computer Science Poratal
    •             
            
        
      
  • 输出:

      注意:所有方法中的垂直空间都会不同。