减少徽标和它下面的元素之间的空间

因此，我正在为我的班级构建此网站，教授建议我应将我的徽标放在我网站的左上角。有些人非常友好地帮助我放置徽标，但徽标下面的空间和英雄横幅上方的空间太大，我试图通过在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任何提示/帮助？

来源

2016-08-03 Gabi Rodríguez

关于这个网站，你觉得有用的答案，[考虑的给予好评和/或对勾（http://stackoverflow.com/help/someone-answers）。没有义务。只是提高质量内容的一种方式。欢迎来到堆栈溢出！ –

-1

您可以添加上填充了.site-header__title：

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

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

来源

2016-08-03 04:34:55

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

您可以通过调节上h1边缘控制从英雄形象标志的距离。

开始与此：

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

这看起来不错：

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

来源

2016-08-03 04:35:04

感谢您的回复。我真的很感谢 –

集所需的保证金在下面类

.site-header__title 
{ 
    margin:10px; 
}

来源

2016-08-03 04:35:49

的答案以上都已经很好，所以才供您参考...

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

如您所见，您可以很容易地看到容器盒的外观，以及边距和填充距离;还可以在浏览器中测试不同的值，以便在提交编辑器和FTP之前解决它看起来的样子。

我发现这个过程是一个更快的为什么消除显示错误和布局问题。

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

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

来源

2016-08-03 04:51:55 AdheneManx

我刚刚做了另一个修改，它非常有帮助。非常感谢你的见解！ –

太棒了:-)很高兴帮助...这些天我在浏览器中做了很多CSS！如果Firefox也可以将开发人员窗口中的CSS代码直接复制/粘贴到HTML/CSS编辑器中。 – AdheneManx

也正在考虑使用CSS重置脚本： http://meyerweb.com/eric/tools/css/reset/ 这样的事情会给你一个公平的竞争环境，所以你指定所有你自己的填充和边距。这个想法是将所有东西都置零，这样所有浏览器的最终结果都是一样的。 – AdheneManx

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

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

来源

2016-08-03 05:13:02 frnt

谢谢！ :)这实际上非常有帮助！ –

欢迎@GabiRodríguez，如果它工作，然后确实接受答案。 – frnt

减少徽标和它下面的元素之间的空间

回答

相关问题