div里包裹着文字，之间有空隙（）

Question

*{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 50px;
}
.parent{
    width: 1200px;
}
.child{
    display: inline-block;
    width: 300px;
    height: 300px;
}
#one{
    background-color: #888;
}
#two{
    background-color: #aaa;
}
#three{
    background-color: #ccc;
}

<div class="parent">
    <div class="child" id="one">1</div>
    <div class="child" id="two">2</div>
    <div class="child" id="three">3</div>
</div>

div之间有空隙。我知道两个解决办法。

1. 三个div不换行

2. 设置font-size＝0

我还要知道原因，以及更优雅的解决办法。。。

Answer 1

空隙产生原因：HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙。

解决方式供参考：
如何解决inline-block元素的空白间距
如何消除inline-block产生的元素间空隙

Answer 2

.children{float:left;}

Answer 3

原因：
1，在设置为inline-block的div中间有空格就好像文字中间由空格一样，都会产生一个字符的空隙，所以自然会出现间隔

解决方法：
1，父元素设置：font-size:0px;
2，margin-left:-(x)px;根据具体的font-size调整一下
3，float:left;
4，使用flexbox
5，在两个div之间不要有空格