資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 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-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 Grids
我們可以為列表使用網格佈局。在 CSS Grids 中，使用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。正如我們已經看到的，元素之間的正確間距可以增強任何網站的視覺外觀。但是，始終需要根據不同的螢幕尺寸和裝置檢查和調整間距。這將使您的網站具有響應性。
5K+ 瀏覽量
