inline-block元素在布局时会给我们带来很多方便，但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙（有的浏览器可能是8px）。
如图所示：
解决办法：
给父元素设置font-size:0
<!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"/>
<meta name="author" content="Chomo"/>
<link rel="start" href="http://www.14px.com" title="Home"/>
<title>利用box-sizing实现div仿框架</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent{
font-size: 0;
}
div{
display: inline-block;
}
.test1{
width: 600px;
height: 58px;
background: #ff7d00;
font-size: 14px;
}
.test2{
width: 500px;
height: 40px;
background: #0066cc;
font-size: 14px;
}
.test3{
width: 700px;
height: 60px;
background: #7d7d7d;
font-size: 14px;
}
</style>
</head>
<body>
<div class="parent">
<div class="test1">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div class="test2">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div class="test3">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>
</body>
</html>
来源：oschina
链接：https://my.oschina.net/u/2561199/blog/733820