为什么宽度各为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;
      }

来源：https://www.cnblogs.com/8qiu/p/10721661.html

标签

内联元素

padding