减少徽标与其下方元素之间的空间

Question

所以，我正在为我的班级建立这个网站，教授建议我将我的徽标放在我网站的左上角。有些人帮我放置了徽标，但徽标下方的空间和英雄横幅上方的空间太大了，我试图通过在CSS中使用填充来减少空间，但它没有用。

这是标题的当前编码：

<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

您的徽标嵌套在h1元素中，该元素通常包含顶部和底部边距空间。

您可以通过调整h1上的边距来控制徽标与英雄图像的距离。

从这开始：

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

看起来不错：

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

Answer 2

在下面的课程

中设置所需的保证金

.site-header__title
{
  margin:10px;
}

Answer 3

上面的答案已经很好了，所以仅供参考......

如果您使用的是Firefox或Chrome，则可以按F12并打开开发者控制台;从那里可以很容易地在CSS中进行格式化，并在编辑和上传之前找出你想要改变的CSS。

在中，你可以很容易地看到容器盒的外观，边距和填充的间距来自哪里;并且在提交到编辑器和FTP之前，还要在浏览器中测试不同的值以找出它的样子。

我发现这个过程要快得多，可以解决显示错误和布局问题。

如果您发现它很有用并且您开始使用Javascript / jQuery，请考虑使用调试AJAX的Firebug插件也更加容易。您还可以在浏览器中进行所有常规CSS操作。

试试那个工作流程;我个人觉得它更快。祝你好运！

Answer 4

将height添加到.site_header，这可以减少徽标和视频上方的间距。

.site-header {
  height:85px;
  background: #29272C;
}

Answer 5

您可以为.site-header__title添加顶部填充：

eg.site-header__title { padding: 5px 0 0 0; }

或者您可以设置.site-header class的高度。