两个并列的inline-block 元素的问题_inline-block 一行排2个-优快云博客

本文链接：https://blog.youkuaiyun.com/lxinxini/article/details/116696530

本文探讨了CSS3中inline-block元素之间出现空白的原因，这是由于行内元素间的空白符在字体不为0时占据了一定宽度。作者提出了三种解决方案：1) 将子元素标签在同一行内；2) 父元素设置font-size: 0，子元素重置font-size；3) 子元素使用float:left。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

解决办法:

1. 将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行

<div class="container">
  <div class="left">
      左
  </div><div class="right">
      右
  </div>
</div>

2. 父元素中设置font-size: 0，在子元素上重置正确的font-size

.container{
  width:800px;
  height:200px;
  font-size: 0;
}

3. 为子元素设置float:left

.left{
  float: left;
  font-size: 14px;
  background: red;
  display: inline-block;
  width: 100px;
  height: 100px;
}
//right是同理

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