Bootstrap 4 Gitter "Cube"

Question

Ich kann keinen Weg finden, die 13px Leerraum unter dem Bild zu entfernen. Ich möchte, dass das div die gleiche Größe des Bildes hat, aber ansprechend. Ich habe versucht, Padding und Rand hinzuzufügen, aber nichts ändert sich. Vielen Dank!

screenshot

  html, body { 
 
       font-family: "Helvetica"; 
 
       height: 100vh; 
 
       margin: 0; 
 
      } 
 

 
      .flex-center { 
 
       align-items: center; 
 
       display: flex; 
 
       justify-content: center; 
 
      } 
 

 
      .position-ref { 
 
       position: relative; 
 
      } 
 

 
      .content-white { 
 
       background-color: #fff; 
 
       color: #000; 
 
       width: 100%; 
 
       text-align: center; 
 

 
       display: -webkit-flex; 
 
       display: flex; 
 
       -webkit-flex-direction: row; 
 
       flex-direction: row; 
 
       -webkit-align-items: center; 
 
       align-items: center; 
 

 
       flex-wrap: wrap; 
 
       min-width: 320px; 
 
       max-width: 1220px; 
 

 
      } 
 
      
 
/* image grid */ 
 
      #css-table { 
 
      display: table; 
 
      } 
 
      #css-table .col { 
 
      display: table-cell; 
 
      width: 33%; 
 
      } 
 

 
      .clearboth { 
 
       clear: both; 
 
      } 
 

 
      .cube { 
 
       vertical-align: middle; 
 
       font-size: 50px; 
 
       border: 1px solid #000; 
 
      } 
 

 
      .cube-text { 
 
      } 
 

 
      .cube img { 
 
       width:100%; 
 
      } 
 

 
      .cdesc { 
 
       font-family: "Helvetica Light"; 
 
       font-size: 16px; 
 

 
      }

 <div class="flex-center position-ref"> 
 

 
      <div id="css-table" class="content-white"> 
 

 
       <div> 
 

 
        <div class="col cube"> 
 
        <img src="http://placehold.it/400x400" /> 
 
        </div> 
 

 
        <div class="col cube cube-text"> 
 
        TEXT 
 
        <p class="cdesc">Lorem ipsum dolor sit amet <br/> Lorem ipsum dolor sit amet.</p> 
 
        </div> 
 

 
        <div class="col cube"> 
 
        <img src="http://placehold.it/400x400" /> 
 
        </div> 
 

 

 
        <div class="clearboth"></div> 
 

 

 
        <div class="col cube cube-text"> 
 
        TEXT 
 
        <p class="cdesc">Lorem ipsum dolor sit amet <br/> Lorem ipsum dolor sit amet.</p> 
 
        </div> 
 

 
        <div class="col cube" > 
 
        <img src="http://placehold.it/400x400" /> 
 
        </div> 
 

 
        <div class="col cube cube-text"> 
 
        TEXT 
 
        <p class="cdesc">Lorem ipsum dolor sit amet <br/> Lorem ipsum dolor sit amet.</p> 
 
        </div> 
 

 
       </div> 
 

 
      </div> 
 

 
     </div>

Answer 1

Stellen Sie das Bild auf display: block oder display: inline-block.

Answer 2

  html, body { 
 
       font-family: "Helvetica"; 
 
       height: 100vh; 
 
       margin: 0; 
 
      } 
 

 
      .flex-center { 
 
       align-items: center; 
 
       display: flex; 
 
       justify-content: center; 
 
      } 
 

 
      .position-ref { 
 
       position: relative; 
 
      } 
 

 
      .content-white { 
 
       background-color: #fff; 
 
       color: #000; 
 
       width: 100%; 
 
       text-align: center; 
 

 
       display: -webkit-flex; 
 
       display: flex; 
 
       -webkit-flex-direction: row; 
 
       flex-direction: row; 
 
       -webkit-align-items: center; 
 
       align-items: center; 
 

 
       flex-wrap: wrap; 
 
       min-width: 320px; 
 
       max-width: 1220px; 
 

 
      } 
 
      
 
/* image grid */ 
 
      #css-table { 
 
      display: table; 
 
      } 
 
      #css-table .col { 
 
      float:left; /* Changed here */ 
 
      width: 33%; 
 
      } 
 

 
      .clearboth { 
 
       clear: both; 
 
      } 
 

 
      .cube { 
 
       vertical-align: middle; 
 
       font-size: 50px; 
 
       border: 1px solid #000; 
 
       height:207.33px; /* Added a height */ 
 
      } 
 

 
      .cube-text { 
 
      } 
 

 
      .cube img { 
 
       width:100%; 
 
      } 
 

 
      .cdesc { 
 
       font-family: "Helvetica Light"; 
 
       font-size: 16px; 
 

 
      }

 <div class="flex-center position-ref"> 
 

 
      <div id="css-table" class="content-white"> 
 

 
       <div> 
 

 
        <div class="col cube"> 
 
        <img src="http://placehold.it/400x400" /> 
 
        </div> 
 

 
        <div class="col cube cube-text"> 
 
        TEXT 
 
        <p class="cdesc">Lorem ipsum dolor sit amet <br/> Lorem ipsum dolor sit amet.</p> 
 
        </div> 
 

 
        <div class="col cube"> 
 
        <img src="http://placehold.it/400x400" /> 
 
        </div> 
 

 

 
        <div class="clearboth"></div> 
 

 

 
        <div class="col cube cube-text"> 
 
        TEXT 
 
        <p class="cdesc">Lorem ipsum dolor sit amet <br/> Lorem ipsum dolor sit amet.</p> 
 
        </div> 
 

 
        <div class="col cube" > 
 
        <img src="http://placehold.it/400x400" /> 
 
        </div> 
 

 
        <div class="col cube cube-text"> 
 
        TEXT 
 
        <p class="cdesc">Lorem ipsum dolor sit amet <br/> Lorem ipsum dolor sit amet.</p> 
 
        </div> 
 

 
       </div> 
 

 
      </div> 
 

 
     </div>