display:inline-block元素之間存在空隙

antzone發表於2017-04-03
原文網址 : https://www.softwhy.com/article-5608-1.html
inlineBloC

在實際編碼中，不少朋友可能遇到這樣的問題，那就是排列成一行的元素如果新增display:inline-block屬性，元素之間會出現空隙，有時候這並非是我們所需要的，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
body{
  margin:0px;
  font-size:12px;
}
div{
  margin:100px;
}
div a{
  width:100px;
  height:30px;
  background:#ccc;
  display:inline-block;
  text-align:center;
  line-height:30px;
}
</style>        
</head>
<body>
<div>
<a href="#">螞蟻部落一</a>   
<a href="#">螞蟻部落二</a>   
</div>
</body>
</html>

在上面的程式碼中，連結<a>元素之間會出現空格，下面介紹一下原因和解決方案。

之所以出現空格是因為display:inline-block允許空隙的出現（由於換行在內的空白符造成的）。

解決方案如下:


[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
body{
  margin:0px;
  font-size:12px;
}
div{
  margin:100px;
  font-size:0px;
}
div a{
  width:100px;
  height:30px;
  background:#ccc;
  display:inline-block;
  text-align:center;
  line-height:30px;
  font-size:12px;
}
</style>        
</head>
<body>
<div>
  <a href="#">螞蟻部落一</a>
  <a href="#">螞蟻部落二</a>   
</div>
</body>
</html>

只要將父元素的字型大小設定為0即可，font-size:0px。

相關文章