Javascript 如何消除响应列之间的空白？

我很难找到第二个和第三个图像之间出现空白的解决方案，当两列布局被告知要转到一列以响应较小的浏览器窗口（即，在手机上查看）时

以下是链接：

我尝试过在CSS的响应部分进行编码，但没有效果

我相信有一个简单的解决方案，但我对编码相对较新，因此，任何帮助或想法都将不胜感激。我在想为“第N个孩子”编写代码可能是一条出路

CSS

HTML

小柄

尼尔斯·弗拉姆

韩国烤肉

詹妮·基

JS

函数myFunction（）{
var x=document.getElementById（“myNavbar”）；
如果（x.className==“导航栏”）{
x、 类名+=“响应”；
}否则{
x、 className=“navbar”；
}
}

首先，这是问题的根源：

@media screen and (max-width: 800px) {
.column {
    width: 100%;
    padding-bottom: 60px;
}

将其更改为：

@media screen and (max-width: 800px) {
    .column {
        width: 100%;
        padding-bottom: 0px;
    }
}

然后，如果图像之间的所有空格应相同，则将此处的空格设置为

0

，并查看差异：

@media screen and (max-width: 800px) {
    .column {
        padding: 0;
    }
    p {
        margin: 0;
    }
}

并将

5px

添加到每个图像：

@media screen and (max-width: 800px) {
    .container {
        padding-bottom: 5px;
    }
}

---

您可以在800媒体查询下提供保证金

将其从60替换为0

@media screen and (max-width: 800px) {
  .column  {
    width: 100%;
    padding: 0px;
    padding-bottom:0px;
  }
}