html - 减少 Logo 与其下方元素之间的空间

Question

所以，我正在为我的类(class)建立这个网站，教授建议我应该把我的标志放在我网站的左上角。有些人好心地帮我放置了 Logo ，但 Logo 下方和英雄横幅上方的空间太大，我试图通过使用 CSS 中的填充来减少空间，但没有奏效。

这是 header 的当前编码:

<header role="banner" id="home" class="site-header">
<div class="container container--max">
  <h1 class="site-header__title">
    <a href="#home"><img src="images/logo2.png"></a>
  </h1> <!-- end .site-header__title -->

这是我的网站:http://gabrielr.sgedu.site/final-project有任何提示/帮助吗？

Answer 1

您的 Logo 嵌套在 h1 元素中，该元素通常带有顶部和底部边距空间。

您可以通过调整 h1 上的边距来控制 Logo 与主图的距离。

从这里开始:

header > .container > h1 { margin: 0; }

这看起来不错:

header > .container > h1 { margin: .5em 0; }