两个并列的inline-block 元素的问题

<div></div>
<div>111</div>

div {
  height:30px;
  width:30px;
/*   border: 10px solid pink; */
  display:inline-block;
  padding:10px;
/*   margin:10px; */
  background: red;

}

 

衍生问题。 

block，inline和inline-block概念和区别

继而问，最开始为什么会有这种区分？？

 

display: inline-block 产生白空隙。

`

产生空白的原因··

    元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。

作者：三元同学
链接：https://zhuanlan.zhihu.com/p/91961299
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业