子元素宽度设置50%无法并排显示的问题

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

需求需要实现的效果图如下所示。
但为了让两个设置了display:inline-block;的div并排显示时，却出现了换行的问题。（如下图所示）

解决方法

方法1. width:49%;（虽然解决了布局的问题，但是还是不明白为什么了宽度设置了50%会失效。）

为了找到原因，专门去百度寻找了一番，最终得到的答案就是：HTML的标签之间是会存在间距的。

对于这个间距而言，就涉及到了HTML的另一个知识点：空白折叠现象。

问：何谓空白折叠现象？
答：HTML 代码中所有连续的空格、换行和tab（制表符）都会被算作一个空格显示在页面上。

注：
（1）在平时的开发中，我们为了提高代码的整洁性和可读性，经常会用换行和缩进调整HTML代码的结构，使其看起来美观简洁，可读性比较强。但殊不知，这样做还会带来一系列的问题。
（2）而且我们也知道，如果要实现连续的空格，是不能在HTML的标签中使用连续的空格来表示的，即<span>登空格空格空格录<span>。因为即使你输入再多的空格，浏览器也只会将它解析为一个空格。所以，我们都会使用表示空格的字符实体 来实现，即<span>登   录<span>。

【不懂的戳这里】什么是空白折叠现象？为什么要空白折叠呢？

现在，我们明白了，导致标签之间存在间距的原因有：代码换行、tab（制表符）、空格。

问：那么，如何去掉html标签之间的间距的？

答：标签产生间距的解决方案如下

元素写成一行；【不推荐使用该方法】当代码较多时，比如说ul>li的布局，代码可读性和可维护性较差

//原始
<div class="father">
    <div class="son son1">我是div1</div>//此处的换行，在页面上显示时就是一个空格。
    <div class="son son2">我是div2</div>//因为有默认的字体大小，所以div之间会存在间距
</div>

//改变后：
<div class="father">
        //当我们想让它们在同一行连续显示时，就让所有的代码之间没有空格，也不要换行。
        <div class="son son1">我是div1</div><div class="son son2">我是div2</div>
</div>

给父元素设置font-size:0。【推荐使用】方便快捷

原理：多出来的其实是换行符，所以将字体设置为0，那么换行符就是0px不会显示了。但是如果将HTML标签写成一行的话，就没有换行符了。

注意：因为子元素会继承父元素的字体大小，所以此处需要给子元素单独设置font-size属性，否则文字显示不出来。

参考资料：

案例演示

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>50%平分宽度的问题</title>
    <style>
    div{
        padding:0;
        margin:0;
    }
    .father{
        width: 200px;
        height: 100px;
        border:1px solid #666;
        font-size:0;
    }
    .son{
        width: 50%;
        height: 100%;
        display: inline-block;
        color:#fff;
        font-size: 16px;
    }
    .son1{
        background-color: #666;
    }
    .son2{
        background-color: #0dcee7;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son son1">我是div1</div>
        <div class="son son2">我是div2</div>
    </div>
</body>
</html>

效果展示

谷歌浏览器显示效果如下所示：
这里写图片描述

搜狗浏览器显示效果如下所示：
这里写图片描述

火狐浏览器显示效果如下所示：
这里写图片描述

说明：不同的浏览器厂商在效果显示上会存在差异。边框处留白的具体原因暂且未知。