Удаление пустого пространства самозагрузки

Question

Я пытаюсь удалить пустое пространство, которое у меня между плитками, как на картинке ниже:

Это то, что я в настоящее время:

Вот отметка для второй картины, которая в настоящее время имеет то, что у меня есть:

CSS

.mainbody-section { 
     padding-top: 30px; 
     padding-bottom: 30px; 
    } 

     /* Overlay text */ 
    .module { 
     background-color: lightgray; 
     background-attachment: fixed; 
     /*width: 400px;*/ 
     height: 300px; 
     position: relative; 
     overflow: hidden; 
     margin: 20px; 
    } 

     .module > header { 
      position: absolute; 
      bottom: 0; 
      left: 0; 
      width: 100%; 
      padding: 20px 10px; 
      background: inherit; 
      background-attachment: fixed; 
      overflow: hidden; 
     } 

      .module > header::before { 
       content: ""; 
       position: absolute; 
       top: -20px; 
       left: 0; 
       width: 200%; 
       height: 200%; 
       background: inherit; 
       background-attachment: fixed; 
       -webkit-filter: blur(4px); 
       filter: blur(4px); 
      } 

      .module > header::after { 
       content: ""; 
       position: absolute; 
       top: 0; 
       left: 0; 
       width: 100%; 
       height: 100%; 
       background: rgba(0, 0, 0, 0.25); 
      } 

      .module > header > h1 { 
       margin: 0; 
       color: white; 
       position: relative; 
       z-index: 1; 
      } 

      .module > header > h2 { 
       margin: 0; 
       color: white; 
       position: relative; 
       z-index: 1; 
      } 

    * { 
     box-sizing: border-box; 
    } 

HTML

<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;"> 
<div class="row"> 
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right"> 
     <div class="module"> 
      <header> 
       <h1 style="font-size: 20px; text-align: center;">Test 
       </h1> 
       <h2 style="font-size: 13px; text-align: center;"> This is some sub-text 

       </h2>     
      </header>     
     </div> 
    </div> 
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right"> 
     <div class="module"> 
      <header> 
       <h1 style="font-size: 20px; text-align: center;">Test 
       </h1> 
       <h2 style="font-size: 13px; text-align: center;"> This is some sub-text 

       </h2>     
      </header>     
     </div> 
    </div> 
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right"> 
     <div class="module"> 
      <header> 
       <h1 style="font-size: 20px; text-align: center;">Test 
       </h1> 
       <h2 style="font-size: 13px; text-align: center;"> This is some sub-text 

       </h2>     
      </header>     
     </div> 
    </div> 
</div> 

Может кто-то пожалуйста, мне советы по пути, чтобы удалить все белое пространство между плитками?

Благодаря

Answer 1

.mainbody-section { 
 
     padding-top: 30px; 
 
     padding-bottom: 30px; 
 
    } 
 
.newClass{ 
 
     background-color: lightgray; 
 
     padding: 0px!important; 
 
     margin:0px!important; 
 
} 
 
.red{ 
 
    background-color: red!important; 
 
} 
 
     /* Overlay text */ 
 
    .module { 
 
     background-color: #abc; 
 
     background-attachment: fixed; 
 
     /*width: 400px;*/ 
 
     height: 300px; 
 
     position: relative; 
 
     overflow: hidden; 
 
    } 
 

 
     .module > header { 
 
      position: absolute; 
 
      bottom: 0; 
 
      left: 0; 
 
      width: 100%; 
 
      padding: 20px 10px; 
 
      background: inherit; 
 
      background-attachment: fixed; 
 
      overflow: hidden; 
 
     } 
 

 
      .module > header::before { 
 
       content: ""; 
 
       position: absolute; 
 
       top: -20px; 
 
       left: 0; 
 
       width: 200%; 
 
       height: 200%; 
 
       background: inherit; 
 
       background-attachment: fixed; 
 
       -webkit-filter: blur(4px); 
 
       filter: blur(4px); 
 
      } 
 

 
      .module > header::after { 
 
       content: ""; 
 
       position: absolute; 
 
       top: 0; 
 
       left: 0; 
 
       width: 100%; 
 
       height: 100%; 
 
       background: rgba(0, 0, 0, 0.25); 
 
      } 
 

 
      .module > header > h1 { 
 
       margin: 0; 
 
       color: white; 
 
       position: relative; 
 
       z-index: 1; 
 
      } 
 

 
      .module > header > h2 { 
 
       margin: 0; 
 
       color: white; 
 
       position: relative; 
 
       z-index: 1; 
 
      } 
 

 
    * { 
 
     box-sizing: border-box; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;"> 
 
<div class="row"> 
 
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass"> 
 
     <div class="module"> 
 
      <header> 
 
       <h1 style="font-size: 20px; text-align: center;">Test 
 
       </h1> 
 
       <h2 style="font-size: 13px; text-align: center;"> This is some sub-text 
 

 
       </h2>     
 
      </header>     
 
     </div> 
 
    </div> 
 
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass"> 
 
     <div class="module red"> 
 
      <header> 
 
       <h1 style="font-size: 20px; text-align: center;">Test 
 
       </h1> 
 
       <h2 style="font-size: 13px; text-align: center;"> This is some sub-text 
 

 
       </h2>     
 
      </header>     
 
     </div> 
 
    </div> 
 
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass"> 
 
     <div class="module"> 
 
      <header> 
 
       <h1 style="font-size: 20px; text-align: center;">Test 
 
       </h1> 
 
       <h2 style="font-size: 13px; text-align: center;"> This is some sub-text 
 

 
       </h2>     
 
      </header>     
 
     </div> 
 
    </div> 
 
</div>

http://jsfiddle.net/qbo8pk8j/3/

Answer 2

Вот скрипка: http://jsfiddle.net/q5yfcs2p/

я удалил запас в .module и добавить пользовательский класс для col-*-*, потому что самозагрузки имеют Прокладки по швам , Этот класс .no-padding удаляет левый и правый.

.no-padding { 
    padding-left: 0; 
    padding-right: 0; 
} 

Answer 3

есть padding на вашу col диве и есть в вашей module диве margins. см демо: http://jsfiddle.net/swm53ran/347/

.myClass { 
    padding: 0px; 
} 
.myClass .module { 
    margin: 0px; 
    outline: 1px solid black; 
}