代码和页面效果放在后面，我们先看一下text-indent中的em
再来了解一下text-decoration的含义
下面就是text-decoration的值
下面是text-decoration-style的值
我们的行间距有三部分组成，有上间距，文本高度和下间距，文本高度就是文字的像素大小，如果有多余的像素就会有上间距和下间距平均分配
下面是文本属性的一个总结，可能不是很全面
代码如下：
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1 { color: rgb(221, 73, 73); text-align: center; /* align可能被废弃了，在开发中用不上了，css里面有更好的办法来实现它 */ }
div { color: #dc1422; text-decoration: underline pink wavy; /* text-decoration-color: red; */ /* text-decoration-style: wavy; wavy是波浪线*/ /* 可以分开写，也可以集合在一起写，那样更节约代码 */ }
p { text-indent: 2em; /* 用来指定文本第一行的缩进，通常是将段落的首行缩进 */ font-style: italic; color: red; }
.thick { color: #dc5467; font-size: 20px; text-decoration: underline red dashed 6px; /* 后面这个6px就是装饰线的thickness(粗细) */ }
.lineh { color: #ad7987; font-size: 20px; /* 这是文本字体大小 */ line-height: 30px; /* 这是行间距 */ } </style> </head>
<body> <h1>你干嘛~哎呦</h1> <div>你食不食油饼啊</div> <p>你们是不是人啊!道歉会不会!你们黑他黑得那么爽,骂他骂得那么爽,整天TM没有任何一个人会给他道歉。 你们这样会毁了他的前途,毁了他的一生！！</p> <p>荔枝，你让我拿什么荔枝啊?我爱的那个他都被你们这样对待了，还让我怎么荔枝，啊？ 看着他被你们骂得狗血淋头我还坐视不管这就叫荔枝了吗？！</p> <br> <span class="thick">我庆幸我比流言蜚语更早认识蔡徐坤。 未曾谋面的也终将会相遇。披金成王，伴坤远航！</span><br><br><br><br><br><br> <span class="lineh">小黑子香精煎鱼食不食，香菜风饪鸡食不食，香翅捞饭食不食？ 小黑子香精煎鱼食不食，香菜风饪鸡食不食，香翅捞饭食不食？</span> </body>
</html>
网页效果如下，丑是丑了点，但每个功能都还能实现就行了
标签：间距,系列,color,标签,decoration,text,不食,文本
From： https://www.cnblogs.com/feng-233/p/17039833.html