极客笔记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来在项目列表之间创建空间。
示例
在这个示例中，我们对两个具有相同15px值的列表同时使用了padding-top和padding-bottom。可以看到，两个列表都创建了相同的垂直间距。
<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 属性来调整行高。
语法
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的弹性盒子布局
我们可以使用弹性盒子布局来对我们的列表进行排版。在这里，我们需要使用 justify-content 属性来在列表项之间创建空间。
示例
在这个示例中，我们将<ol>元素转换为弹性容器，并为其指定了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。 正如我们已经看到的，适当的元素间距可以提升任何网站的视觉效果。然而，根据不同的屏幕尺寸和设备来检查和调整间距是很有必要的。这将使您的网站具有响应式的设计。