间距是页面布局中的一个重要元素，用于为文本行提供间隙，提高可读性。在 CSS 中，line-style 属性用于控制行间距。

值

line-style 属性可以接受以下值：

* none：禁用行间距。

* hidden：隐藏行间距。

* normal：使用浏览器默认的行间距。

* inherit：从父元素继承行间距。

* initial：使用元素的原始行间距。

* unset：清除元素的所有行间距。

应用

line-style 属性在以下元素上有广泛的应用：

* 文本：控制段落和标题的行间距。

* 表格：控制表格行的行间距。

* 列表：控制列表项之间的垂直间距。

影响

line-style 属性会影响：

* 行间距的大小。

* 文本内容在行内扩展的范围。

* 元素的高度。

最佳实践

* 考虑网页的整体设计来配置行间距。

* 选择合适的行间距值以提高可读性。

* 避免使用非常小的行间距值。

结论

line-style 属性是 CSS 中一个强大的工具，用于控制文本行高。通过正确使用此属性，可以改善页面布局和可读性。

高有无单位的问题

Div{font: 12px/1.5 '宋体'}
Div{font: 12px/1.5em '宋体'}
Div{font: 12px/150% '宋体;}

<style>
.father{
width:200px;
height:30px;
background-color:pink;
font-size:16px;
line-height:2em;
}
.son{
font-size:20px; /* 继承过来的行高为32px */
}
</style>
<div class="father">
<div class="son"> 我是文字 </div>
</div>
<style>
.father{
width:200px;
height:30px;
background-color:pink;
font-size:16px;
line-height:2;  /* 设置文本所在行的行高。默认为normal。 */
}
.son{
font-size:20px; /* 继承过来的行高为40px 20*2px */
}
</style>
<div class="father">
<div class="son"> 我是文字 </div>
</div>

行高 2em 和 2 不一样的。

加em ：

先计算大小, 后继承。

不跟单位：

先继承, 后计算大小。

级元素：使用时，会自动换行的元素，可以包含行内元素和其他块级元素，可以设置宽，高，上下左右边距，默认 css 属性 display 的值为 block

• 块级元素常用的有哪些

1. div // 块， 经常用来布局的块，类似箱子
2. h1-h6 // 标题，肯定是会换行的啦
3. p // 段落，我们写文章，段落也是换行处理的
4. ul,ol,li // 列表，总不希望你写的列表，表格还跟其他东西掺杂一起吧，
5. from // 表单，输入框总希望能够单独是一块独立的
6. table // 表格，表格要整洁，总希望独立出来
7. hr // 水平分割线，既然要分割，那也是要换行处理吧
8. pre // 预格式化文本，代码按照我们手动编排好的顺序输出，你总不希望他还不给你行吧，不然就没意义了
9. footer // 段尾，类似写作文结尾，都是另起一行
10. article // 文章内容，看书的时候，文章内容都会在合适的位置给换行处理
11. canvas // 绘制图形
12. address // 地址

行内元素：不会自动换行，不可以设置宽高，只能设置左右边距，默认 css 属性 display 的值为 inline

• 块级元素常用的有哪些？

1. b // 加粗
2. big // 定义大字号
3. i //斜体
4. small // 小号文本
5. abbr // 定义缩写，有些国际词语是有缩写的
6. acronym // 定义只取首字母的缩写
7. cite // 引用，文章内容的某一句话可能是引用其他名人说的
8. code // 定义计算机代码
9. dfn // 定义一个定义项目
10. em // 定义强调的本文
11. kbd // 定义键盘文本
12. strong // 定义重要的文本
13. samp // 定义样本文本。
14. var // 定义变量
15. a // 锚点，内容里经常会有几个关键词，可以点击过去查阅更多详细信息
16. bdo
17. br // 换行
18. object // 内嵌对象
19. q // 短的引用
20. script
21. span // 普通文档的节
22. sub // 定义下标文本
23. sup // 定义上标文本
24. button // 按钮，
25. input // 控件
26. label // input 元素定义标注
27. select // 定义选择列表，看起来很多，实际上占位就我们选择的那一个
28. textarea // 定义一个多行的文本输入控件

行内块级元素，拥有行内元素的特性，不换行，也拥有块级元素的特性：既可以设置宽高也可以设置上下左右边距，默认 css 属性 display 的值为 inline-block

常见行内块级元素:

1. img // 图片
2. video // 视频
3. audio // 音频
4. map // 图像映射

块级元素和行内元素如何转换

• 块级元素变成行内元素

display: inline;

• 行内元素变成块级元素

display: block;

• 块级元素、行内元素变成行内块元素

display: inline-block;

其他

• a 标签只允许嵌套非 a 标签的 inline 类型元素。
• 这么多，不要为难自己死记硬背，记住常用的，用常识去记住就可以啦，面试考你的时候，记不住的，用常识去推理，基本都正确。