刪除內聯元素之間的空隙

admin發表於2018-11-15

當內聯元素在一行顯示的時候，元素之間有時候會出現間隙。

這是一種很怪異的現象，會對一些初學者造成不小的困擾。

如果您瞭解其中的原理，自然感覺此現象合情合理，消除此問題自然也手到擒來。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{
  background-color:#ccc;
}
</style>
</head>
<body>
<span>螞蟻部落</span>
<span>螞蟻部落</span>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/15/181941mc0nmdm5c5bmasx5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

兩個span元素顯示在一行，它們之間出現了空隙。

這是因為在標準瀏覽器中，空格和換行會被瀏覽器解讀為文字節點。

知道了產生的原因，那麼可以有如下措施刪除它們之間的空隙。

一.將標籤在一行排列：

既然空格和換行會被解讀為文字節點。

那麼不出現空格和換行即可，程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{
  background-color:#ccc;
}
</style>
</head>
<body>
<span>螞蟻部落</span><span>螞蟻部落</span>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/15/182007ktnqn0y0tnullqms.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

span元素在一行排列，由此元素間的空隙被刪除。

此方式缺點也很明顯，如果佈局元素很多，勢必會造成一行程式碼過長，不利於閱讀。

二.將字型大小設定為0：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{font-size:0;}
span{
  background-color:#ccc;
  font-size:16px;
}
</style>
</head>
<body>
  <span>螞蟻部落</span>
  <span>螞蟻部落</span>
</body>
</html>

既然被解讀為文字節點，那麼將其字型大小設定為0，那麼文字就不再佔據空間。

上述程式碼設定body字型大小為0，為了保持span中文字字型大小的正常，將span字型大小設定為16px。

三.將元素浮動起來：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{
  background-color:#ccc;
  float:left;
}
</style>
</head>
<body>
  <span>螞蟻部落</span>
  <span>螞蟻部落</span>
</body>
</html>

將span元素設定為左浮動，那麼span元素就會脫離文件流。

脫離文件流的元素雖然不再佔據文件流中元素的空間，但是依然佔據文字的空間。

所以空格和換行生成的文字節點會被浮動元素擠到後面，自然之間的空隙被消除。

為了演示方便，將空格和換行換為"antzone"，程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{
  background-color:#ccc;
  float:left;
}
</style>
</head>
<body>
  <span>螞蟻部落</span>antzone<span>螞蟻部落</span>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/15/182106jpsk3phcdspkark4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

三.設定負外邊距：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{
  background-color:#ccc;
  margin-left:-5px;
}
</style>
</head>
<body>
  <span>螞蟻部落</span>
  <span>螞蟻部落</span>
</body>
</html>

通過設定負外邊距同樣可以消除元素之間的空隙。

每一種方式各有利弊，可以根據自身程式碼所處的上下文情形選擇更為合適的方式。

相關文章