调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; }