css设置字与字间距：letter-spacing: 10px;
letter-spacing 属性增加或减少字符间的空白。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
例子：给两段文字分别设置letter-spacing: 10px;和letter-spacing: 4px;
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{background:#ddd;}
div{width:600px;height:300px;margin:30px auto;border:2px solid #e4007e;padding: 10px;}
text1{letter-spacing: 4px;}
text2{letter-spacing: 10px;}
</style>
</head>
<body>
<div>
<p>许多人因为给自己定的目标太高太功利，因为难以成功而变得灰头土脸，最终灰心失望。究其原因，往往就是因为太关注拥有，而忽略做一个努力的人。</p>
<p>对于今天的孩子们，如果只关注他们将来该做个什么样的人物，不把意志品质作为一个做人的目标提出来，最终我们只能培养出狭隘、自私、脆弱和境界不高的人。遗憾的是，我们在这方面做得并不尽如人意。</p>
</div>
</body>
</html>
效果：
HTML控制字与字之间的距离和行与行之间的距离，首先解决的是字与字之间的距离，理解下字与字不就是word么，距离，就要结合css来做，通过word-spacing:8px；这里就是8px的字间距，行与行之间的距离，我们可以通过行高来做，也就是line-height，这个属性，具体我们可以通过代码来理解：<html>
<head>
#div1{
width:200px;
height:600px;
margin:0 auto;
boreder:1px solid #f00 //加个边框利于观察
}
#div1 p{
word-spacing:8px;
line-height:30px;
height:30px;
}
</head>
<body>
<div id='div1'>
<p>我有间距</p>
</div>
</body>
</html>你可以用这个试一下，加到网页的<head>。。。。</head>之间就可以了。<style type="text/css">
<!--
line-height:130%;
-->
</style> 注：130%是可以修改的，你自己多试一下就会明白
内部样式：
p{line-height:2em;/单位em为字体高度的倍数，如2em。此段文字行间距为2倍文字高度/
}
内联样式：
<p style="line-height:2em;">文字的行间距为<br/>2倍文字高度</p>div 如果文字有多行，行间距设置的具体 *** 作步骤如下：
1、首先我们新建一个HTML文件。
2、然后我们在html文件里创建p标签和文本。
3、如图展示预览效果可以看出此时多行文字行间距并不统一。
4、然后我们使用数值来设置行间距line-height: 05。
5、我们再使用数值来设置行间距line-height:2。
6、最后再使用数值来设置行间距line-height: 4。
7、最后运行结果如图，如此通过以上步骤即可解决div 如果文字有多行，行间距设置的问题。
那个没办法调整。下划线和文字的距离是自动的。如果文字不是好几行的画，过你可以隐藏下划线，给文字的外壳span添加一个边框线来模拟下划线，通过调整pad属性或者line-height属性来增加这个距离。当然了如果多行的画你就要分别对每一行执行span设置。这其中可能需要计算每一行的字数，避免自动换行。这样就比较复杂了。
还有一个简单的方法就是不设定下划线，然后设定行高，然后把下划线做到背景图上。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）