可折叠div间出现异常间隙问题求助

嘿，这种折叠元素之间莫名出现几像素间隙的坑我可踩过！你已经排除了margin的问题，那十有八九是inline-block元素的空白间隙在搞鬼——当元素设置为inline-block时，HTML代码里的换行、空格会被浏览器渲染成几像素的空白，刚好就是你看到的那种异常间隙。

你的折叠逻辑是通过切换display: block/none来控制面板显示隐藏的，当面板从none变回block时，它和上方的"GameName"菜单项之间的空白就显现出来了。给你几个实用的解决方案：

• 方案一：消除HTML中的空白字符
  把可折叠元素之间的换行、空格去掉，比如把菜单项和面板写在同一行，或者用注释"吃掉"空白：

  <div class="menuItem">GameName</div><!--
  --><div class="panel">这里是折叠内容</div>
  

• 方案二：父容器设置font-size: 0
  给包含这些折叠元素的父容器设置font-size: 0，这样容器内的空白字符就不会被渲染，再给子元素重新设置正常的字体大小：

  .menuContainer {
    font-size: 0;
  }
  .menuItem, .panel {
    font-size: 16px; /* 改成你需要的字体大小 */
  }
  

• 方案三：改用Flex布局
  Flex布局默认会消除子元素之间的空白间隙，而且布局更灵活，只需要给父容器设置：

  .menuContainer {
    display: flex;
    flex-direction: column;
  }
  

这几个方法都能解决你的问题，你可以根据自己的代码结构选最顺手的。比如HTML结构好改的话，方案一最直接；要是不想动HTML，方案二或三更省心。

内容的提问来源于stack exchange，提问作者py9