css - Bootstrap 4 网格 "cube"

Question

我找不到删除图片下方 13px 空白的方法。我希望 div 与图像大小相同，但响应迅速。我尝试添加填充和边距，但没有任何变化。谢谢!

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

将图像设置为display: block 或display: inline-block。