首先，先給大家看一組demo
<input /> <input type="submit" />
展示效果：
為什麼會出現空格呢？input不是行內元素嗎？改變一下代碼再看看效果
<input /><input type="submit" />
如果2個input之間沒有間隙的話，下面的空格就消失了
再試驗一組行內元素：
<span>行內元素</span> <span>行內元素</span> <span>行內元素</span> <span>行內元素</span> <span>行內元素</span>
展示效果如下：
為了使這些行內元素之間的間距消失，我們手動刪除行內元素之間產生的額外空隙，代碼如下
<span>行內元素</span><span>行內元素</span><span>行內元素</span><span>行內元素</span><span>行內元素</span>
效果圖如下：
使用這種方法確實可以去掉行內元素之間的間距，但是代碼堆成了一片，看得起很不舒服，那還可以怎麼解決？
一.使用font-size:0
原理：行內元素的間距是由於換行符、tab(制表符)、空格等字符引起，而字符的大小是定義字體大小來控制，所以去除間隔可以從改變字體的大小入手。即設置當前行內元素的父元素的 font-size: 0;
<div>
<span>行內元素</span>
<span>行內元素</span>
<span>行內元素</span>
<span>行內元素</span>
<span>行內元素</span>
</div>
div{
font-size: 0px;
}
span{
font-size: 14px;
}
效果圖如下： 嘿嘿，行內元素之間的間距不見了
這個方法，基本上可以解決大部分浏覽器下inline,inline-block元素之間的間距(IE7等浏覽器有時候會有1像素的間距)。不過有個浏覽器，就是Chrome, 其默認有最小字體大小限制，因為，考慮到兼容性，我們還需要添加：
div{
font-size: 0;
-webkit-text-size-adjust:none; /* 使用webkit的私有屬性，讓字體大小不受設備終端的調整，可定義字體大小小於12px */
*word-spacing:-1px; /* 使用word-spacing 修復 IE6、7中始終存在的 1px 空隙，減少單詞間的空白（即字間隔） */
}
通常情況下，我們可能會想要通過下面的代碼實現一些效果
<p>行內 元素</p> <p>行內 元素</p>
但是效果圖確實下面這樣子，這是因為，默認情況，浏覽器在解析 html 時，HTML 源碼中的空白符均被顯示為空格，並且連續的多個空白符會被視為一個。
HTML 中的“空白符”包括：空格 (space)、制表符 (tab)、換行符 (CR/LF) 三種。
這並不能難倒我們，使用空格的替代符號
<p>行內 元素</p> <p>行內 元素</p>
效果圖：
- 使用方法：可以用名稱或編號作為空格的替代符號，名稱必須小寫，末尾的“;”不能省略。通常情況下我們都是使用 （也就是按下space鍵產生的空格。）
1.white-space
但是，如果我們想實現下面這個效果？有一定的縮進？是否要使用margin，padding？之類的屬性？
<div style="white-space:pre">
function sum(x,y){
var sum = x + y;
return sum;
}
</div>
當white-space屬性取值為pre時，浏覽器會保留文本中的空格和換行，這樣你就可以直接在文本中使用空格和回車了。
2.letter-spacing
設置文本中字符之間的間隔，它的取值可以是一個帶單位的長度值，浏覽器會在字和字之間設置指定長度的空白。
<div style="letter-spacing:20px">歡迎光臨！</div>
3.word-spacing
設置文本中單詞之間的間隔，它的取值可以是一個帶單位的長度值
<div style="word-spacing:20px">Happy new year!</div>
4.text-indent
有時候，文章每個段落需要縮進，實現那麼的效果？
使用text-indent 設置首行縮進，它的取值可以是一個帶單位的長度值，
<div style="text-indent:2px">歡迎光臨！</div>