删除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元素之间的缝隙属于前端实例代码，有关更多实例代码大家可以查看。