如何调试和摆脱div中项目之间的差距

由 发布于

我看到页面上项目之间的差距。 Firebug在项目之前或之后未显示任何填充或边距。我使用的是物化CSS，当我删除样式表时，页面会崩溃。可能是什么原因造成的，并且Firebug是否可能未显示填充或边距？

我将尝试提供代码，但是我的div的相对位置是一个接一个。

在下面的图像中，相对间隔的div之间显示的是白色间隙。我不能摆脱它。

enter image description here

   #Group_18 {
      position: relative;
      width: 100%;
      height: 40px;
      margin-left: 0px;
      margin-top: 0px;
      background-color: rgba(190,190,190,1);
      border: 0;
      overflow: visible;
   }

   #Menu_Items {
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      top: 50%;
      overflow: visible;
      width: 89px;
      white-space: nowrap;
      position: absolute;
      text-align: left;
      font-family: Arial, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
      font-style: normal;
      font-weight: bold;
      font-size: 16px;
      color: rgba(0,0,0,0.584);
      letter-spacing: -0.03px;
   }
   #Recipe_Container {
      position: relative;
      width: 100%;
      height: auto;
      background-color: rgba(227,227,227,1);
      border: 0;
      overflow: visible;
   }
   #recipes {
      position: relative;
      width: 80%;
      height: auto;
      left: 50%;
      transform: translateX(-50%);
      top: 0px;
      background-color: rgba(201,201,227,1);
      border: 0;
      overflow: visible;
      max-width: 900px;
   }
   #Group_20 {
      position: relative;
      width: 100%;
      height: 40px;
      background-color: rgba(128,227,227,1);
      border: 0;
      overflow: visible;
   }
   <div id="Group_18">
      <div id="Menu_Items">
         <span>Menu Items</span>
      </div>
   </div>
   <div id="Recipe_Container">
      <div id="recipes" class="recipes container ">Here be recipes
      </div>
   </div>
   <div id="Group_20">
      <div id="footer">Footer
      </div>
   </div>