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

本文主要是介绍子元素宽度设置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属性，否则文字显示不出来。

参考资料：

html的空格和换行显示 - 2350305682 - 博客园
font-size:0的作用
如何去掉html标签之间的间距
font-size: 0;解决inline元素间的空白间隙

案例演示

源代码：

<!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>