div之间的多余空间

Question

我正在使用Materialize构建具有多个响应列的网站。在<main>标签中，我有2列和类似卡片的div （它们不是实体卡片）。问题是，当我在列中有多个div时，它们会创建一种奇怪的页边距类型，无法通过CSS删除。

我需要摆脱 div 1 和 div 4 或以后创建的其他任何div之间的边距。另外，我需要能够控制div的大小（使用s12，m6，l4等），如下所示：

我的问题是：如何保留大小调整功能并摆脱“边距”？我需要使用哪些工具？我只能使用css / javascript / materialize吗？

/*CARDS*/
.u-card {
   width: 100%;
   height: auto;
   box-shadow: 0px 0px 3px #dedede;
   border: 1px solid #dedede;
   margin-bottom: 10px;
   border-radius: 5px;
}
.u-card-title {
   font-size: 20px;
   text-transform: uppercase;
}
.u-card-header {
   border-bottom: 1px solid #ccc;
}
.u-card-footer {
   border-top: 1px solid #ccc;
}

<div class="row">

   <div class="col m12 l9 u-p-5">

       <div class="col m6 l6 xl12">

         <div class="u-card">
            <div class="u-card-body u-p-10">
               <p class="u-card-title blue-text u-pb-10 u-fs-15 u-f-bold">1</p>
               <p class="u-fs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
               quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
               consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
               cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
               proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
               <br>
               <p class="u-fs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
               quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
               consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
               cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
               proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
         </div>

      </div>


      <div class="col m6 l6 xl6">

         <div class="u-card">
            <div class="u-card-body u-p-10">
               <p class="u-card-title blue-text u-pb-10 u-fs-15 u-f-bold">2</p>
               <p class="u-fs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
               tempor incididunt ut labore et dolore magna aliqua. .</p>
            </div>
         </div>

      </div>

      <div class="col m12 l6 xl6">

         <div class="u-card">
            <div class="u-card-body u-p-10">
               <p class="u-card-title blue-text u-pb-10 u-fs-15 u-f-bold">3</p>
               <p class="u-fs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
               quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
               consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
               cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
               proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
         </div>

      </div>

      <div class="col m12 l6">

         <div class="u-card">
            <div class="u-card-body u-p-10">
               <p class="u-card-title blue-text u-pb-10 u-fs-15 u-f-bold">4</p>
               <p class="u-fs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
               quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
               consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
               cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
               proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
         </div>

      </div>

   </div>

</div>