如何使用 CSS 设置项目列表之间的垂直间距？
原文:https://www . geeksforgeeks . org/如何使用 css 设置项目列表之间的垂直间距/
HTML 中的项目列表可以是多种类型，如有序列表、无序列表或描述列表。默认情况下，项目列表之间有固定的垂直间距。我们可以通过使用不同的 CSS 属性来增加或减少项目列表的垂直间距。在本文中，我们将介绍设置项目列表之间垂直间距的所有可能方法。
CSS 行高属性: 在这个方法中，我们将设置列表项的行高，最终会增加或减少列表项的垂直间距。
-
语法:
html line-height: normal|number|length|percentage|initial|inherit; -
例:
```html <!DOCTYPE html>
Using line-height to set line-height.container { width: 500px } h1 { color: green; } b { position: absolute; top: 20%; } .left ul {
/ Increase line-height compare to default / line-height: 2.5em; float: left; } .right { float: right; }
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 页边距顶端属性 : 我们将应用页边距顶端属性，该属性将设置列表项的行高，最终将增加或减少列表项的垂直间距。 CSS 边距-底部 属性也可以适用。 注意:也可以只使用 CSS 边距属性 。
-
语法:
html For margin-top margin-top: length|auto|initial|inherit|percentage;```html For margin-bottom margin-bottom: length|auto|initial|inherit|percentage;
```
-
expmle:
```html <!DOCTYPE html>
Using margin-top and margin-bottom to set line height.container { width: 500px } h1 { color: green; } b { position: absolute; top: 20%; } .left {
float: left; } .right {
float: right; }
li:not(:first-of-type) { margin-top: 1.5em; }
li:not(:last-of-type) { margin-bottom: 1.5em; }
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 填充-top 属性 : 我们将应用填充-top 属性，该属性将设置列表项的行高，最终将增加或减少列表项的垂直间距。 CSS 填充-底部属性 也适用。 注意:也可以只使用 CSS 填充属性 。
-
语法:
html For padding-top padding-top: length|initial|inherit;html For padding-bottom padding-bottom: length|initial|inherit; -
例:
```html <!DOCTYPE html>
Using padding-top and padding-bottom to set line height.container { width: 500px } h1 { color: green; } b { position: absolute; top: 20%; } .left {
float: left; } .right {
float: right; }
li:not(:first-of-type) { padding-top: 1.0em; }
li:not(:last-of-type) { padding-bottom: 1.0em; }
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
```
-
输出:
![]()
注意:所有方法中的垂直间距会有所不同。
版权属于：月萌API www.moonapi.com，转载请注明出处
