如何使用 CSS 设置项目列表之间的垂直空间？

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

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

• 句法：

  line-height: normal|number|length|percentage|initial|inherit;

• 例子：

  
  
    
  
      
      
      
    
      
    
  
    
  
      
  
          
  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;
  

• 例子：

  
  
    
  
      
      
      
    
      
    
  
    
  
      
  
          
  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;

• 例子：

  
  
    
  
      
      
      
    
      
    
  
    
  
      
  
          
  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
              
          
      
  
    
  
  

• 输出：

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