整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
原图样式）
今天我们讲一下几个文本标签<code>text-indent</code>,<code>letter-spacing</code>和<code>line-height</code>,并附加讲一下<code>first-line</code>和<code>first-letter</code>的使用方法。
先上源码：
<!DOCTYPE html>
<html>
<head>
<title>css文本标签介绍</title>
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
}
</style>
</head>
<body>
<div class="wenben">
今天我们来测试一下自己间距的设置方法，主要标签有<code>text-indent</code>、<code>letter-spacing</code>和<code>line-height</code>,附加讲一下<code>first-line</code>和<code>first-letter</code>的样式。
</div>
</body>
</html>
第一个标签：text-indent（设置抬头距离css缩进）
css样式：
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
}
</style>
第二个标签：letter-spacing(设置字与字之间的间距)
css样式：
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
letter-spacing: 3px;
}
</style>
第三个标签： line-height(设置行高，就是每一行的高度)
css样式：
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
letter-spacing: 3px;
line-height: 30px;
}
</style>
第四个标签，其实叫做选择器: ::first-line(设置第一行的样式)
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
letter-spacing: 3px;
line-height: 30px;
}
.wenben::first-line{
color:blue;
font-weight: bold/*字体加粗*/;
}
</style>
第五个选择器: ::first-letter(设置第一行的第一个字的样式)
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
letter-spacing: 3px;
line-height: 30px;
}
.wenben::first-line{
color:blue;
font-weight: bold/*字体加粗*/;
}
.wenben::first-letter{
font-size: 24px;
color: white;
font-weight: normal;
border: 1px solid red/*设置文字边框*/;
background-color:blue/*设置文字背景*/;
padding: 2px;
}
</style>
你学会了吗？有问题可以私聊我哦！
前端工作中，设计代码时，经常会有人手动删除行内元素之间产生的额外空隙，并通过设置margin或padding来获取想要间距吗？如代码：
<div class=“”><span class=“bgr”>去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span></div>
这看起来很不舒服，特别扔给给JS同事后，JS同事看完代码后就会提出抱怨，代码太乱，他们希望的代码是如下：
<div class="">
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
</div>
那么有什么好的办法解决的？答案也是有的。
1.行内元素之间的“换行符”产生间距
<div class="">
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
</div>
展现效果如下：
2.行内元素之间使用“tab(制表符)”产生间距
<div class="">
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
</div>
展现效果如下：
3.行内元素之间使用“空格”产生间距
<div class=""><span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span>
</div>
展现效果如下：
上以上3点可以看出，行内元素之间产生的间距，是由于换行符、tab(制表符)、空格等字符引起，而字符的大小是定义字体大小来控制。
那么改变字体的大小可调整行内元素的间距么?
上图把字体从0px~18px~36px的调整，可见行内元素之间的水平间距从无到有，并不断变大，说明行内元素之间产生间距是由换行符、tab(制表符)、空格等字符引起的，那么设置字体大小font-size:0可以是不是可以在所有浏览器中除去这些间距呢？
经过测试后，可发现设置font-size:0并不能使得换行符、tab(制表符)、空格等在所有浏览器中产生的额外间距消失：
1.IE6、7浏览器始终存在的 1px 空隙
2.最新版本的Safari浏览器（5.1.7）不支持定义字体大小为 0 的浏览器
通过查找资料后，一种比较正常的解决方法如下：
1.针对IE6、7浏览器，使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔）
*word-spacing:-1px;
2.使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px
html{-webkit-text-size-adjust:none;}
问题解决了，代码如下：
结构：
<div class="span-wrap">
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
</div>
样式：
html{
-webkit-text-size-adjust:none;/* 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px */
}
.span-wrap {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔） */
}
.span-wrap span{
font-size: 12px;
letter-spacing: normal;/* 设置字母、字间距为0 */
word-spacing: normal; /* 设置单词、字段间距为0 */
}
干脆直接使用浮动，简单，也不用写多余的hack，多好。的确使用浮动技术是比较好的办法，实际工作中我们使用浮动也是比较多，但是也并不是每处地方都要使用浮动，而且使用浮动后还需要清除浮动的操作。
文/丁向明
做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833
http://dingxiangming.com
说完HTML语言CSS字体的缩进text-indent,接下来我们讲下字体的行间距属性 line-height. 该属性用来设置行间的距离，也就是我们经常说的行高。可以控制文字行与行之间的距离。
来一起看下line-height的语法:
p {
line-height:20px;
}
怎么理解行间距呢？看下面这个图就可以理解了
对于一行文字来说，文字上面和上一行文字的下面，文本高度，文字的下面和下一行文字的上面，三者加起来就是整个行间距。
来看下具体的效果:
可以看出，段落间的行间距是16px,如果是一行文字的话，可以看的更清楚
<!DOCTYPE html>
*请认真填写需求信息，我们会在24小时内与您取得联系。
