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

在当今的网页设计时代，创建具有良好布局和组织内容的视觉吸引力的网站是关键任务。开发人员面临的最常见挑战之一是，他们需要了解如何正确定义元素之间的间距，以提高网页的可读性。

在这里，我们有 CSS 来救援。CSS 使开发人员能够控制 HTML 元素的外观，包括它们之间的正确间距。在本文中，我们将讨论使用 CSS 设置列表项之间垂直间距的不同方法。

我们可以在 HTML 中创建各种类型的列表。这些是无序列表、有序列表和描述列表。列表项之间默认的垂直间距有一个默认值。但是，您可以使用下面提到的任何方法相应地更改间距。

使用 Margin-bottom

添加列表项之间间距的最常用方法是在所有列表项中添加底部边距。

语法

以下是语法：

ul li{
   margin-bottom: value;
}

示例

这里，我们创建了两个列表 - 一个具有列表项之间垂直间距的默认值，而另一个具有增加的垂直间距。

Open Compiler
<html>
<head>
   <style>
      h2 {
         color: orange;
         text-decoration: underline;
         margin: 10px;
      }

      h3 {
         color: red;
      }

      .demo li {
         margin-bottom: 10px;
      }
   </style>
</head>
<body>
   <h2> List of items </h2>
   <ul>
      <h3>List with default vertical space between its items.</h3>
      <li> Item 1 </li>
      <li> Item 2 </li>
      <li> Item 3 </li>
      <li> Item 4 </li>
   </ul>
   <ul class="demo">
      <h3>List with increased vertical space between its items.</h3>
      <li> Item 1 </li>
      <li> Item 2 </li>
      <li> Item 3 </li>
      <li> Item 4 </li>
   </ul>
</body>
</html>

使用 Padding

我们还可以添加填充而不是边距来在列表项之间创建间距。

示例

在此示例中，我们对两个列表都使用了 padding-top 和 padding-bottom，其值为 15px。正如我们所看到的，两个列表都创建了相同的垂直间距。

Open Compiler
<html>
<head>
   <style>
      h2{
         color: orange;
         text-decoration: underline;
         margin: 10px;
      }
      h3{
         color: red;
      }
      .demo li {
         padding-bottom: 15px;
      }
      ul li{
         padding-top: 15px;
      }
   </style>
</head>
<body>
   <h2> List of food items </h2>
   <ul>
      <h3> The following list has increased vertical space by using padding-top property. </h3>
      <li> Apples </li>
      <li> Mango </li>
      <li> Banana </li>
      <li> Orange </li>
   </ul>
   <ul class= "demo">
      <h3> The following list has increased vertical space by using padding-bottom property. </h3>
      <li> Guava </li>
      <li> Pine apple </li>
      <li> Strawberries </li>
      <li> Watermelon </li>
   </ul>
</body>
</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

使用 Line-height

增加列表项之间间距的另一种方法是使用line-height 属性调整行高。

语法

ol li{
   line-height: value;
}

示例

此示例用于增加列表中每行的高度，从而在它们之间创建间距。

Open Compiler
<html>
<head>
   <style>
      h2 {
         color: orange;
         letter-spacing: 1px;
         margin: 10px;
      }

      h3 {
         color: red;
      }

      ol li {
         line-height: 1.8;
      }
   </style>
</head>
<body>
   <h2> line-height method </h2>
   <ol>
      <h3> List of programming languages which are popularly used in modern days. </h3>
      <li> JavaScript, TypeScript, React </li>
      <li> Python, MongoDB </li>
      <li> C/C++ </li>
      <li> Java, SQL </li>
   </ol>
</body>
</html>

使用 CSS Flexbox

我们可以为列表使用 flexbox 布局。在这里，我们需要使用justify-content 属性在列表项之间创建间距。

示例

在这里，我们将<ol> 元素转换为 flex 容器并为其分配了 120px 的所需高度。然后，我们使用justify-content: space-between 来创建间距。可用空间（即 120px）在所有列表项之间平均分配。这为它们提供了更大的垂直间距。

Open Compiler
<html>
<head>
   <style>
      h2{
         color: orange;
         letter-spacing: 1px;
         margin: 10px;
      }
      h3{
         margin: 15px;
         color: red;
      }
      ol {
         height: 120px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
      }
   </style>
</head>
<body>
   <h2> Using Flexbox </h2>
   <h3> List of programming languages which are popularly used in modern days. </h3>
   <ol>
      <li> JavaScript, TypeScript, React </li>
      <li> Python, MongoDB </li>
      <li> C/C++ </li>
      <li> Java, SQL </li>
   </ol>
</body>
</html>

使用 CSS Grids

我们可以为列表使用网格布局。在 CSS Grids 中，使用grid-gap 属性在列表项之间创建间距。

示例

让我们来看一个例子：

Open Compiler
<html>
<head>
   <style>
      dt{
         font-weight: bold;
      }
      dd{
         margin-bottom: 15px;
      }
      dl{
         display: grid;
         grid-template-columns: 1fr;
         grid-gap: 10px;
      }
   </style>
</head>
<body>
   <dl>
      <dt> HTML </dt>
      <dd> Hyper Text Markup Language (HTML) is the standard markup language which enables developers to create web pages. </dd>
      <dt> CSS </dt>
      <dd> Cascading Style Sheets is a stylesheet language which is used for applying styles to the HTML elements. </dd>
      <dt> JavaScript </dt>
      <dd> JavaScript is a high-level, scripting programming language which helps us in creating interactive web pages and web applications. </dd>
   </dl>
</body>
</html>

结论

在本文中，我们讨论了 CSS 中设置列表项之间垂直间距的不同方法。这些方法是margin-bottom、padding-top 和 padding-bottom、line-height、flexbox 和 grid。正如我们已经看到的，元素之间的正确间距可以增强任何网站的视觉外观。但是，始终需要根据不同的屏幕尺寸和设备检查和调整间距。这将使您的网站具有响应性。

更新于：2023年4月28日

5K+ 浏览量

启动你的职业生涯

通过完成课程获得认证

立即开始
广告