0
イメージの下にある13pxの空白を削除する方法が見つかりません。私は、divが画像のサイズと同じで、反応が良いことを望みます。パディングと余白を追加しようとしましたが、何も変わりません。ありがとうございました！ブートストラップ4グリッド "立方体"
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>
ありがとうございます！ –