整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前端工作中，設計代碼時，經常會有人手動刪除行內元素之間產生的額外空隙，并通過設置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
lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>網站頁面</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
body {
background-color: #FFFFFF;
text-align: center;
font-family: "宋體";
font-size: 12px;
color: #575757;
}
#banner {
height: 210px;
width: 982px;
margin: 0 auto;
}
#menu {
height: 87px;
width: 982px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box">
<div id="banner"><img src="images/203.jpg" width="982" height="210" alt="banner" /></div>
<div id="menu"><img src="images/204.jpg" width="223" height="80" alt="gamestart" />
<img src="images/205.jpg" width="106" height="80" alt="menu1" />
<img src="images/206.jpg" width="102" height="80" alt="menu2" />
<img src="images/207.jpg" width="105" height="80" alt="menu3" />
<img src="images/208.jpg" width="100" height="80" alt="menu4" />
<img src="images/209.jpg" width="77" height="80" alt="menu5" />
<img src="images/210.jpg" width="86" height="80" alt="menu6" />
<img src="images/211.jpg" width="77" height="80" alt="menu7" />
<img src="images/212.jpg" width="106" height="80" alt="menu8" /></div>
</div>
</body>
</html>
根據我們的案例，邊框、邊界、邊距都設置成0了，圖片與圖片之間還是有空隙，這是為什么呢？
記得之前解決的方法是，img標簽符之間不要有空格或者回車。
就是寫成這樣的
還有些其他的方法，可以讓其在水平方向上不留下空隙，也就是左右的空隙，比如
#menu { font-size:0;} //意思是父級元素的字體大小為0，img默認是根據父元素的baseline進行對齊的，把父元素的字體大小設置為0，就沒有空隙了，作為子元素的img對齊相應的也就沒有空隙了
#menu {letter-spacing:-600px}
0
本例參考了網上的例子，唯一不一樣的是，我這里的操作是一步一步講解，網上僅是源碼。
一、我們先創建一張空白的網頁，網頁要自適應手機。
圖1
二、我們再創建網頁的頭部。
圖2
圖3
三、做出來的網頁頭部太丑了，我們要去掉盒子與瀏覽器的間隙，還有給頭部加內部距離。
圖4
圖5
四、給網頁頭部添加一些內容。
圖6
圖7
五、接下來開始做導航條了。
圖8
圖9
六、發現沒，導航條居然看不見，沒有東西在里面自然是看不見的，我們加三個鏈接吧。
圖10
圖11
七、這回是看見了，不過樣式太丑，我們改改樣式。
圖12
圖13
八、加上內部距離，就好看了許多，即然是鏈接，我們加點動態吧，當鼠標在鏈接上面時，鏈接塊變色。
圖14
圖15
九、開始做網頁內容，網頁內容我分為三塊，左右兩邊是側欄，中間是主要內容。
圖16
圖17
十、我想讓它橫著排，它卻是豎著排，改改各個塊的樣式。
圖18
圖19
十一、給主體的各個塊加點內容。
圖20
圖21
十二、內容是有了，但你會發現各塊之間沒有間隙，貼得太近了，我們改一下樣式，加個內部距離。
圖22
圖23
十三、距離是有了，但有一個側欄跑到了另一行，怎么回事？原來padding是會改變盒子的整體寬度，我們原本是100%，現在多了padding的寬度，自然就換行了，解決一下吧。
圖24
圖25
十四、這回終于在一行了，接下來可以做網頁底部了。
圖26
圖27
十五、改改樣式，讓底部好看一點。
圖28
圖29
十六，這個時候，網頁的整體版面就完成了，再補充一個小內容，讓網頁瀏覽器在小于600像素寬的時候，主體內容的三個塊由橫變豎。
圖30
圖31
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
