如何使用 CSS 设置项目列表之间的垂直间距?
在当今的网页设计时代，创建布局合理、内容井然有序、视觉吸引力强的网站至关重要。开发人员面临的最常见挑战之一是，他们需要知道如何正确定义元素之间的间距，以提高网页的可读性。
CSS 可以帮您解决这个问题。CSS 使开发人员能够控制 HTML 元素的外观，包括元素之间的适当间距。在本文中，我们将讨论使用 CSS 设置项目列表之间垂直间距的不同方法。
我们可以在 HTML 中创建各种类型的列表。这些列表包括无序列表、有序列表和描述性列表。项目列表之间的垂直间距有一个默认值。但是，您可以使用下面提到的任何一种方法相应地更改间距。
使用 Margin-bottom
在列表项之间添加间距的最常用方法是为所有列表项添加底部边距。
语法
以下是语法 -
ul li{
margin-bottom: value;
}
示例
在这里，我们创建了两个列表 - 一个列表项之间的垂直间距为默认值，而另一个列表项之间的垂直间距增加了。
<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 而不是 margin，以在项目列表之间创建空间。
示例
在此示例中，我们对两个列表使用了 padding-top 和 padding-bottom，其值均为 15px。我们可以看到，两个列表创建的垂直空间相同。
<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>
使用 Line-height
增加列表项之间间距的另一种方法是使用 line-height 属性调整行高。
语法
ol li{
line-height: value;
}
示例
此示例用于增加列表中每行的高度，从而在每行之间创建间距。
<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)均匀分布在所有列表项之间。这增加了它们的垂直空间。
<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 网格
我们可以为列表使用网格布局。在 CSS 网格中，grid-gap 属性可以在列表项之间创建空间。
示例
让我们看一个例子 -
<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。正如我们已经看到的，元素之间适当的间距可以增强任何网站的视觉效果。但是，始终有必要根据不同的屏幕尺寸和设备检查和调整间距。这将使您的网站具有响应能力。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
