删除display:inline-block元素之间的缝隙

我心飞翔 分类:实例代码

当对两个元素采用display:inline-block的时候,它们之间可能会出现缝隙。

下面就介绍一下如何删除这个缝隙,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#box {
  width:100%; 
  height:50px; 
  background-color:red;
}
#left {
  width:50%;
  display:inline-block;
  height:100px;
  background:#ccc;
  text-align:center;
  line-height:100px;
}
#right {
  width:50%;
  display:inline-block;
  height:100px;
  background:#ccc;
  text-align:center;
  line-height:100px;
}
</style>
</head>
<body>
  <div id="box">
    <div id="left">犀牛前端部落一</div>
    <div id="right">犀牛前端部落二</div>
  </div>
</body>
</html>

上面的代码中,如果left和right元素之间没有缝隙,那么它们会在一行,但是现在换行了。

要解决此问题非常简单,只要将它们父元素的font-size属性值设置为0即可。

#box {
  width:100%; 
  height:50px; 
  background-color:red;
  font-size:0px;
}

删除display:inline-block元素之间的缝隙,这样的场景在实际项目中还是用的比较多的,关于删除display:inline-block元素之间的缝隙就介绍到这了。

删除display:inline-block元素之间的缝隙属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容