整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
原圖樣式）
今天我們講一下幾個文本標簽<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小時內與您取得聯系。
