同一行上的三个div之间有多余的空白

Question

HTML

            <div id="main_page">
                <div class="row d-flex align-items-center">
                    <div class="d-inline-block col-md-4 cuisine_slogan">
                        <h2>Enjoy different cuisines around the world!</h2>
                    </div>
                    <div class="d-inline-block col-md-4 padding-0 pict01">
                        <img src="different_cuisines.png" alt="cuisines_picture01" width="630" height="600">
                    </div>
                    <div class="d-inline-block col-md-4 padding-0 pict02">
                        <img src="different_cuisines02.png" alt="cuisines_picture02" width="600" height="600">
                    </div>
                </div>
            </div>

CSS

    body {
        padding-top: 60px;
        margin: 0;
        overflow-x: hidden;
    }
    #main_page {
        padding-top:20px;
        
    }
    #main_page h2{
        float:left;
    }
    .cuisine_slogan{
        height:600px;
        background-color:greenyellow;
    }
    .cuisine_slogan h2{
        padding-top:150px;
        padding-left:30px;
        font-size:80px;
        text-align:center;
    }
    .row{
        padding:0;
        
        margin-right: 0;
    }
    img{
        margin-right: 0;
        margin-left:0;
    }

我尝试在img部分使用margin-left:0；和margin-right:0；，但当我刷新html页面时，它仍然在图像和绿框之间包含空白。请问有没有一种方法可以使绿框与图像粘在一起，没有任何空白的行，包括最左和最右？

Answer 1

我认为您使用的是bootstrap,因此可以添加内联填充-left：0；至列

  .padding-0 {
                padding-left: 0 !important;
            }