我正在开发我的第一个portofolio项目（我正在学习Udacity课程）。 我最近研究了一些关于响应性的事情，但是我很难绕过它并了解哪个是哪个（flexbox / grid系统）。因此，我甚至不确定我现在使用的是什么。格？ Flexbox的？我完全糊涂了。
我目前面临的问题是如何在使页面响应时消除内容行之间的空格（例如，当视口小于1200px时，我的主图像与其余内容之间的差距变得巨大）。 请帮帮我。
这是我的整体代码： https://codepen.io/antobloop/pen/LdjZmW
@media screen and (max-width: 1250px){
body {
???
}
}
这就是我所说的： Gap between content
答案 0 :(得分：2)
您在.image上设置了600px的高度，因此当页面变得更窄时，图像会填充顶部，并且您会在空白区域看到间隙。
我在.image上改变了
height:600px;
到
height: 0;
padding-bottom: 56.25%
这是一个小技巧，可以在容器上保持16：9的宽高比，根据父容器的宽度设置整体高度。