php - 无论浏览器大小如何，减少标题图像上方的空白

Question

我的网站是 www.rosstheexplorer.com。

下面的代码在我的header.php中

<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">


<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">

以下代码在Additional CSS中

@media screen and (min-width: 660px) {
    .mobile-header-img {
        display: none;
    }
}

@media screen and (max-width: 660px) {
    .header-img {
        display: none;
    }
}

在桌面上查看网站时，标题图片上方通常有空白区域。即使没有出现移动图像，似乎空白仍然存在。

如何确保页眉图像和页面顶部之间永远没有任何间隙。

谢谢

Answer 1

您在 custom-css 中有以下媒体查询:

@media screen and (min-width: 75em) {
  .site {
    max-width: 1153px;
    margin: 400px auto;
    padding: 54px 108px;
  }
}

400px 边距负责将页眉图片推到页面下方。只需将其删除即可确保页眉位于页面顶部。

或者，您可以使用 margin: 0 auto 400px; 的速记边距，如果您希望保留底部的边距，但移除顶部的边距。

请注意，您还有 54px 的内边距。如果您希望它齐平到页面顶部，您也可以删除填充，或者使用padding: 0 108px 54px; 只填充底部。

希望对您有所帮助! :)