为什么宽度各为50%的内联块（inline-blocks）不能并排显示
调CSS时有一件事是我们非常困惑，有两个连续的inline-block的元素，没有margin，没有padding，也没有border。如果这两个元素各自width都设置成50%，那么他们应该并排显示，对吗？
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body {
padding: 0;
margin: 0;
}
div {
height: 300px;
margin: 0;
border: 0;
display: inline-block;
}
.half {
width: 50%;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
</style>
</head>
<body>
<div class="half left"></div>
<div class="half right"></div>
</body>
</html>
但实际呢？第二个元素跑到第二行去了，不是我们想要的并排显示。
当我们把width设置成49%就成了我们想要的并排显示。
在StackOverflow的帮助下，我找到了这个原因。虽然很奇怪，但这是有道理的!
注意到没？在图2的篮框和红框之间有一条白色的空白区域，没设置margin、padding和border，那这条白线哪里来的？
我们看另外一个段HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
left
right
</body>
</html>
最后页面显示是left right，而不是leftright。因为单词在不同的行，所以浏览器渲染时在换行符的位置插入一个空格。
这就是最终的根源导致两个width 50%的inline-block不能并排显示。两个内联块容器，它的作用是内联的，它插入一个空白，所以现在我们的宽度总和是50% +空白+ 50%，当然大于100%，我们得到第二个容器就到下一行!
解决方法1：删除之间的空格
<div class="half left"></div><!-- --><div class="half right"></div>
解决方法2：在父容器设置font-size:0
body { padding: 0; margin: 0; font-size:0; }
