截图中两个矩形，一个使inline-block，另一个是block，都没有设置边距。
但是两个矩形中间还是有空隙。
我尝试将两个矩形都设为block，则没有间隙。
为什么会有间隙呢？
<!DOCTYPE html>
<html lang="zh" dir="ltr">
<head>
<meta charset="utf-8">
<title>print</title>
<style type="text/css">
* {
margin: 0;
}
#canvas {
border-style: solid;
border-color: #5bb028;
height: 400px;
width: 400px;
display: inline-block;
}
#print {
border-style: solid;
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<div id="canvas"></div><div id="print"></div>
</body>
</html>
html5
会出现间隙是由于inline box引起的，改变base-line可以去除间隔。
比如，使用
vertical-align:bottomvertical-align:middle,还可以向矩形中添加文字，这也会改变base-line的位置。真是让人觉得恶心。
详细关于
vertical-align和inline-box可以参考一下这篇博文Vertical-Align: 关于inline,inline-block文本排版