引言
Material Design 作为一种现代化的 UI 设计风格，被广泛地应用于Web前端开发中。其中，项目与线的距离是一项很基础的实现技术，本文介绍在这个方面的具体实现方法。
前置知识
在继续阅读本文之前，我们需要先了解以下基础知识：
- HTML 和 CSS 的基础语法和应用
- Material Design 的设计规范
实现方式
Material Design 的设计规范中规定了项目与线的距离上限为 8dp，下限为 12dp，一般来说相邻两行之间的距离是 8dp。
为了体现 Material Design 的设计规范，我们需要在 CSS 样式中进行调整，使得相邻两行间的距离符合要求。
具体实现方法如下：
1. 使用 margin-top 属性
我们可以针对每个项目进行单独的样式调整，在 CSS 中使用 margin-top 属性控制其上边距的大小。这种方法需要比较繁琐的样式设置，但可以达到比较精细的调整效果。
示例代码如下：
.item {
margin-top: 8px;
}2. 使用 line-height 属性
另一种方法是通过设置行高 line-height 属性来控制相邻两行之间的距离。这种方法比较简单，适用于文字及其它长条状元素的布局。
示例代码如下：
.item {
line-height: 1.4rem;
}3. 使用 padding-top 和 margin-bottom 属性
这种方法是通过给父元素设置 padding-top 属性和给子元素设置 margin-bottom 属性来控制相邻两行之间的距离。这种方法比较适用于样式比较规整的项目布局。
示例代码如下：
-- -------------------- ---- -------
---- ------------------
---- -------------
---- -
------
---- -------------
---- -
------
------
-------
---------- -
------------ ----
-
----- -
-------------- ----
-
--------结论
Material Design 中项目与线的距离实现方法有多种，其中常用的有三种，具体实现视项目布局和需求而定。
我们可以结合设计规范和实际需求进行灵活的调整，以达到优秀的用户体验和视觉效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b1d47d91dce0dc887851f